текст между строками в css [дубликаты]

This question already has an answer here:

Line under text with spaces. Is it possible via html & css? 5 answers CSS technique for a horizontal line with words in the middle 19 answers

в CSS, как я могу сделать что-то вроде:

---Item---

с чертой, связанной как линия?

я думал о:

border-bottom: 3px solid #000;

но тогда я не могу переместить строку вверх, плюс строка будет за текстом, а не окружать текст

мой HTML

<ul>
    <li class="sub-menu-item" ><a href="#">FACULTY&STAFF</a></li>
</ul>

(если возможно, я бы хотел не касаться HTML)

Возможно ли все вышеперечисленное с помощью CSS или я все-таки должен использовать изображение?

я стремлюсь к ie8 и выше (и, конечно, ко всем новым браузерам)

 Šime Vidas05 июл. 2012 г., 17:19
Сколько черточек вы хотите слева от слова, а сколько справа? Если вам нужно ровно 3 с каждой стороны, то подумайте:jsfiddle.net/bbjXP
 Jon Taylor05 июл. 2012 г., 17:16
Я не уверен, потому что я не пробовал, но не могли бы вы использовать зачеркивание окружающих персонажей. Тем не менее, вам необходимо изменить HTML, который, как я знаю, вы не хотели делать.
 kapa05 июл. 2012 г., 17:15
Какие браузеры вы намереваетесь поддерживать?
 tom9113605 июл. 2012 г., 17:21
я не хочу тире, я хочу, чтобы вокруг текста были деформированы линии
 tom9113605 июл. 2012 г., 17:16
для IE: ie8 + и всех основных браузеров

Ответы на вопрос(6)

) Он использует изображение, что является плюсом, поскольку позволяет стилизовать штрихи так, как вы хотите, и не имеет дело с причудливыми полями или чем-то, что может испортить остальную часть вашего макета.

li.sub-menu-item
{
    background-image: url('http://i.imgur.com/JIa6C.png'); /* Just a transparent PNG with a line in the middle */
}

li.sub-menu-item a
{
    background-color: #FFF;
    padding: 0 10px;
    margin-left: 200px /* So you can see the left side of the line too */
}

http://jsfiddle.net/wAb8C

 05 июл. 2012 г., 17:37
Это не совсем ответ, потому что ОП говорит, что знает, как решить это с помощью изображения.

0 с интервалом внутри него, который имеет определенный цвет фона:

<div class="test">
   <span>BLA BLA BLA </span>
</div>

И CSS:

.test {
border-bottom: 1px solid #D7D7D7;
border-top: 1px solid #A1A1A1;
line-height: 0;
text-align: center; }

.test span { 
background-color: #BABABA;
padding: 0 10px; }
Решение Вопроса

Внедрить&mdash; до и после вашего контента с использованием CSS:before а также:after селекторы. Вам нужно будет использовать экранированный юникод, так какобсуждается здесь:

li.sub-menu-item:before,  li.sub-menu-item:after {
    content: "\2014"
}​

УвидетьJSFiddle, Для более короткой строки вы можете использовать ndash.

 05 июл. 2012 г., 17:41
Мне нравится ваш ответ лучше, чем мой. Гораздо проще и не требует цвета фона для текста. +1

<hr/> а затем просто установите его длину и заставьте его отображать inline. Или используйте некоторые специальные символы Unicode, если ваша кодировка поддерживает это.

 tom9113605 июл. 2012 г., 17:17
встроенный дисплей? как дисплей: встроенный блок? Зачем?

.sub-menu-item
{
    border-bottom:1px solid black;
    height:0.6em;
    width:200px;
    text-align:center;
    margin-bottom:1em;

}
.sub-menu-item > a
{
    text-decoration:none;
    background:white;
}

& # X200B; http://jsfiddle.net/NpP5F/3/ (updated to work with multiple items)

Протестировано для работы в Firefox, IE и Chrome. Теперь имейте в виду, что это работает изолированно в скрипке. Вероятно, потребуется некоторая настройка, чтобы заставить его работать в других HTML-элементах и стилях и т. Д. Доказательство концепции в любом случае. Это "может" быть сделано

 05 июл. 2012 г., 17:24
Он ломается, когда вы добавляете более одного элемента li.
 05 июл. 2012 г., 17:27
@menislici спасибо, что заметили это. Исправлено добавлением полей.
 05 июл. 2012 г., 17:30
Я понизил голосование, потому что это не решение, которое следует использовать. Нам не нужно доказательство концепции, потому что мы все знаем, что это можно сделать :).
 05 июл. 2012 г., 17:54
@ Tom91136.sub-menu-item > a просто ссылается на<a> тег, который является прямым дочерним (прямо вложенным) классом.sub-menu-item, Это в основном просто гарантирует, что стили будут влиять только на гиперссылки, найденные непосредственно в элементах списка. Надеюсь это поможет. В общем,> просто значит прямой ребенок. Без этого в этом примере.sub-menu-item a будет ссылаться на любойa тег, который находится где-то под.sub-menu-item.
 tom9113605 июл. 2012 г., 17:29
что значит & quot; .sub-menu-item & gt; & Quot; делать? я все еще новичок в CSS ...

ul li{
position: relative;
border-bottom: 1px solid #000;
}

ul li a{

position: relative;
background: #fff;
left: 0;
bottom: -10px;
margin-left: 10px;
color: orange;
text-decoration: none;
}​

Пример здесь

 05 июл. 2012 г., 17:28
@ ba & # x17E; megakapa Я не понимаю.
 05 июл. 2012 г., 17:26
А также-10px это магическое число? -1 от меня.
 05 июл. 2012 г., 17:31
Почему вы выбрали -10px? Что если шрифт больше?
 05 июл. 2012 г., 17:37
Ну, я думаю, @ Tom91136 не просто собирается копировать & amp; вставьте его без соответствия его собственным потребностям. Кроме того, он только заявил, что хочет знать, возможно ли это сделать. Кроме того, как вы можете видеть, текст имеет общий цвет и шрифт, так что, очевидно, он нуждается в ремонте, но, поскольку он не предоставил нам ссылку, чтобы придать ему надлежащий стиль, я предполагаю, что он собирается сделать это, когда он выйдет вживую.
 05 июл. 2012 г., 17:39
Общий аргумент ленивых людей (включая меня иногда, но, к счастью, всегда кто-то предупреждает меня).

Ваш ответ на вопрос