CSS - Div "background-text" instead of background-image
I want my div box to have a "raquo" (») position along the right edge of the div box, inside it, but not part of the hyperlink.
My div box is for a hyper link, here is my CSS
.episode-nav .alignright a {
margin-bottom:7px;
margin-top:7px;
width:274px;
padding:5px 0px;
background:#2A2A2A;
text-align:center;
border:1px solid #1B1B1B;
开发者_运维百科 float:right;
}
What can be done?
If you are attempting to create a menu the correct markup you should use is a list, such as this
<ul id="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
Now, to actually get the »
working. There are two ways of doing it. You can either add in an additional span
with a »
inside it, and place it inside the anchor or the list, or you could use the CSS :after
pseudo-element to generate the content for you. Do note that this second method has less browser support and may be controversial. Have a look at the :after
pseudo-element here: http://reference.sitepoint.com/css/pseudoelement-after
Have a look at a demo of both methods in action here: http://jsfiddle.net/aQSVp/
Notice how you use the content
property to generate the content.
#after a:after {
content: '»';
float: right;
margin-right: 10px;
}
Make yourself a little raquo raster image and use it as a background image.
I'm not 100% sure I understand what you want with 'background-text'. If you simply want a link with a >> in front, why don't you just do this inside your div?
<span>»<a href="...">This is a link</a></span>
Possibly add "white-space:nowrap" to the span's style.
I know this is an old question and already has an answer, but there is a CSS solution to this issue.
Using :before
on the li
, it's possible to have a »
by using the hexadecimal code for it \BB
. Demo here.
HTML:
<ul>
<li>List element 1</li>
<li>List element 2</li>
<li>List element 3</li>
<li>List element 4</li>
</ul>
CSS:
ul
{
list-style: none;
}
li:before
{
content: '\BB ';
}
精彩评论