Как сделать line-through шире / больше, чем текст / элемент с помощью CSS
пожалуйста, дайте мне знать, как я могу заставить CSS сделать line-through собственность шире, чем элемент width?
<h3 style="text-decoration:line-through">50</h3>
и результат выглядит так:
теперь, как я могу сделать линию шире, чем элемент, чтобы быть более очевидным?
как 
2 ответов
можно использовать что сырный путь для
<div> HELLO </div>
или вы можете сделать, это использовать :before и :after псевдо с content свойства
div {
text-decoration:line-through;
}
div:before,
div:after {
content: "a0a0";
}
Примечание использование общие селектора здесь, рассмотрите возможность использования class или id для целевой элемент специально, также, если ваш текст между другим текстом рассмотрите обертывание этого в промежуток и чем использовать :before и :after над span.
брифинг ответ здесь с решением, которое использует методы позиционирования CSS, с помощью которых вы также можете контролировать толщину удара..
вот, я позиционирую дочерний элемент absolute к родительскому элементу. Поэтому убедитесь, что вы объявляете position: relative; на родителя. Отдыхай,:after псевдо обрабатывает остальные, а также убедитесь, что вы используете content: "";, хотя он пустой, он обязательный.
демо 3 (используя позиционирование CSS)
div {
position: relative;
display: inline-block;
padding: 0 10px;
margin: 10px;
}
div:after {
content: "";
position: absolute;
border: 2px solid #000;
top: 50%;
margin-top: -1px;
width: 100%;
left: -2px;
}