text between lines in 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

---

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.

---

Here's a start:

.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;
}

​ http://jsfiddle.net/NpP5F/3/ (updated to work with multiple items)

Tested to work in Firefox, IE and Chrome. Now keep in mind this works in isolation in a fiddle. Would probably require some tweaking to get it to work within other html elements and styles, etc. Proof of concept anyway. It "can" be done.

---

You can create a div with border-top and border-bottom, line-height: 0 with a span inside it that has a defined background color:

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

And the 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; }

链接地址: http://www.djcxy.com/p/88376.html

上一篇: 指南针`

下一篇: 在css中的行之间的文本