Para facilitar cómo modifico visualmente una página, por código estoy agregando una clase a ciertos elementos que me interesa marcar. Al agregarles .marcado
, quedan así:
/* 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>
No puedo hacer que el subrayado de text-decoration
se mantenga en el párrafo y no aparezca en el pseudoelemento ::after
.
Quiero evitar agregarlos como elementos independientes (por ejemplo en un <span>
).
¿Cómo puedo hacer que el párrafo se mantenga subrayado y la "marca" no?
display: inline-block;
display
con el subrayado? No entiendo.