css中的行之间的文本 [英] text between lines in css

问题描述

在CSS中，我可以如下做：

  ---项目--- 
  

连接的短划线像一行？

  border-bottom：3px solid＃000; 
  

但是我不能向上移动行加上行将在文本后面，文本

我的HTML

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

（如果可能，我想避免接触HTML）

我的目标是ie8及以上（和所有当然是新的浏览器）

解决方案

注入& mdash; 之前和之后使用CSS ：之前和：之后选择器。您需要使用转义的unicode，如此处讨论：

  li.sub-menu-item：before，li.sub-menu-item：after {
 content： \\2014
} 
  

请参阅 JSFiddle 。对于较短的行，您可以使用ndash。

in CSS, how can i do something like:

---Item---

with the dash connected like a line?

i thought of :

border-bottom: 3px solid #000;

but then i can't move the line upward plus the line would be behind the text, not surrounding the text

my HTML

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

(if possible, i would like to avoid touching the HTML)

is all the above possible via css or should i just use an image after all?

i'm aiming for ie8 and above(and all the new browsers of course)

解决方案

Inject an — before and after your content using the CSS :before and :after selectors. You'll need to use the escaped unicode, as discussed here:

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

See JSFiddle. For a shorter line you could use an ndash.

这篇关于css中的行之间的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！