Идеи Средней границы, подчеркните середину

Как бы вы создали это в сыром HTML / CSS?

<!DOCTYPE html>
<html>
<head>
<style>

div {
    text-decoration: line-through;
    width: 50px;
}


</style>
</head>
<body>

<div></div>

</body>
</html>

Не похоже, что вы можете применить текстовое оформление к div. Что имеет смысл, потому что это не текст. Есть ли какие-нибудь средние границы?

1 ответ

Я только что ответил на похожий сценарий здесь текст неопределенной длины и строки в HTML/CSS "правильный" путь

Решение, как и выше, может заключаться в том, чтобы иметь промежуток внутри элемента div или заголовка с заданным фоном в псевдоэлементе:before или:after, а затем текст в пределах диапазона может располагаться сверху с белым фоном. Надеюсь, что это решит вашу проблему и ответит на ваш вопрос.

http://jsfiddle.net/7o6c4gvg/

h3 {
    display:block;
    position:relative;
    width:100%;
}
h3:after {
    content:"";
    height:1px;
    width:100%;
    background: #000;
    position:absolute;
    top:50%;
    left:0;
}
h3 span {
    background:#fff;
    display:table;
    margin:0 auto;
    position:relative;
    z-index:9;   
}
Другие вопросы по тегам