Убрать подчеркивание с псевдоэлемента
Такой макет
<head>
<style>
.und {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.num {
text-decoration: none;
}
.num::after {
content: "( " attr(data-num) " )";
text-decoration: none;
}
}
</style>
</head>
<body>
Lorem ipsum dolor sit amet,
<span class="und">
consectetur adipiscing
<span class="num" data-num="1742"></span>
elit
</span>
, sed do eiusmod tempor ...
</body>
Как бы убрать подчеркивание с псевдоэлемента (выводится как "( 1742 )" ) ? text-decoration:none; в .num и .num::after не помогают. |
Никак, это underline родителя(что можно увидеть поменяв, например, цвет).
Либо менять вёрстку, либо костылить добавив элементу underline цвета фона, чтоб перекрывал родительский. |
Проблема решена. Теории не знаю, но помог display: inline-block;
Так работает
<head>
<style>
.und {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.num {
text-decoration: none;
display: inline-block;
}
.num::after {
content: "( " attr(data-num) " )";
text-decoration: none;
}
}
</style>
</head>
<body>
Lorem ipsum dolor sit amet,
<span class="und">
consectetur adipiscing
<span class="num" data-num="1742"></span>
elit
</span>
, sed do eiusmod tempor ...
</body>
Смотрел в спеке, не очень хорошо понял, но там сказано, что подчеркивание как то по разному распространяется на строчные и блочные дочерние элементы. |
| Часовой пояс GMT +3, время: 21:13. |