Apply the text-decoration style only for :: after

Question

Apply the text-decoration style only for :: after

Navigation

#1 by (2 votes)

0

To facilitate how I visually modify a page, by code I am adding a class to certain elements that I want to mark. By adding .marcado , they look like this:

/* CSS de la página */
p {
  font-size: 18pt;
  text-decoration: underline double darkorange;
}

/* CSS inyectado por mi extensión */
p.marcado::after {
  content: 'marca';
  margin-left: 2ch;
  background-color: black;
  color: white;
  text-decoration: none;  /* ESTO NO ME FUNCIONA !!!!! */
}

<p>Párrafo uno</p>

<p class="marcado">Párrafo dos</p>  <!-- Acá le agregué la clase -->

<p class="marcado">Párrafo tres</p> <!-- Acá le agregué la clase -->

<p>Párrafo cuatro<p>

I can not make the underline of text-decoration remain in the paragraph and not appear in the pseudo element ::after .

I want to avoid adding them as independent elements (for example in a <span> ).

How can I make the paragraph stay underlined and the "mark" does not?

css3 css

asked by Woody 26.06.2017 в 07:59

source

1 answer

Check the existence of a file Precompiler css (use of variables) in Angular4

score 2 · Accepted Answer

When adding content with after and before the styles are added to the parent element p as specify here

How can I make the paragraph stay underlined and the "mark" no?

With the property display: inline-block , you undo the text-decoration , but you will wonder what the text-decoration has to do with the display? much given that in the documentation it specifies to which elements the text-decoration does not affect % and one of these is the inline-block