What would be the best way to insert a small image after each list element? I tried it with a pseudo class but something is not right...
ul li a:after {
display: block;
width: 3px;
height: 5px;
background: url ('../images/small_triangle.png') transparent no-repeat;
}
Thanks for any help!
The easier way to do it is just:
ul li:after {
content: url('../images/small_triangle.png');
}
Try this:
ul li a:after {
display: block;
content: "";
width: 3px;
height: 5px;
background: transparent url('../images/small_triangle.png') no-repeat;
}
You need the content: ""; declaration to give your generated element content, even if that content is "nothing".
Also, I fixed the syntax/ordering of your background declaration.
For IE8 support, the "content" property cannot be empty.
To get around this I've done the following :
.ul li:after {
content:"icon";
text-indent:-999em;
display:block;
width:32px;
height:32px;
background:url(../img/icons/spritesheet.png) 0 -620px no-repeat;
margin:5% 0 0 45%;
}
Note : This works with image sprites too
I think your problem is that the :after psuedo-element requires the content: property set inside it. You need to tell it to insert something. You could even just have it insert the image directly:
ul li:after {
content: url('../images/small_triangle.png');
}
ul li + li:before
{
content:url(imgs/separator.gif);
}
My solution to do this:
li span.show::after{
content: url("/sites/default/files/new5.gif");
padding-left: 5px;
}
Related
I've put an image in a superfish menu to separate list items. It seems to be jacking up the alignment on the menu. Any clue as to why and how to fix?
My code is super simple
#menu .sf-menu li:not(:first-child):before {
content: url('../images/menubord.png');
}
You can see it here:
Menu
Thanks for any assistance!
S
You can position the image in relation to the list item:
#menu .sf-menu li:not(:first-child):before {
content: url('../images/menubord.png');
position: absolute;
top: 5px;
}
If you do not want to make it with position, then use following it will work
#menu .sf-menu li:not(:first-child):before {
content: url(../images/menubord.png);
float: left;
margin-top: 5px;
}
How is it possible to get the wavy line in a textfield in all browsers, like google?
Google uses a repeated base64 encoded image as a span below the input. You can type stuff in your span and it will appear below it.
.error:hover {
background: url(data:image/gif;base64,R0lGODlhCgAEAMIEAP9BGP6pl//Wy/7//P///////////////yH5BAEKAAQALAAAAAAKAAQAAAMROCOhK0oA0MIUMmTAZhsWBCYAOw==) repeat-x scroll 0 100% transparent;
display: inline-block;
padding-bottom: 1px;
}
<span class="error">hello</span>
Disclaimer: You have to hover over the span for the effect to appear.
As mentioned here;
With Content:
.underline:after {
content: '~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~';
position: absolute;
width: 100%;
left:0;
overflow: hidden;
top:100%;
margin-top: -.25em;
letter-spacing:-.25em;
}
or with image:
.underline {
display: inline-block;
position:relative;
background: url(http://i.imgur.com/HlfA2is.gif) bottom repeat-x;
}
Try using text-decoration and text-decoration-skip-ink.
The text-decoration-skip-ink: none; can be drawn across the full length of the text content.
span {
text-decoration: red wavy underline;
text-decoration-skip-ink: none;
}
<span>asdsdfsf</span>
Hi I have a list item containing text like this:
<li>Search</li>
and I want to display an icon using font awesome
li:before {
content: "\f002";
}
I don't have the ability to just remove the "Search" text (it is being generated from a Drupal CMS, as is the markup and class names), but I want to hide the Search text, but show the pseudo element (the search icon). How do I do this? Normally what I would do to hide the text is just go:
li {
text-indent: -1000px;
overflow: hidden;
}
but that will hide the pseudo element as well
A bit late to the party, but you could always change the font-size of the li to 0, and change the font-size of the icon back to the original font-size. Like this:
li {
font-size: 0;
}
li:after {
font-size: 1em;
}
You can stick to the "text-indent" method (or better the "Kellum Method") and use CSS positioning for the pseudo element:
li {
display:block;
position:relative;
text-indent: -100%;
white-space: nowrap;
overflow: hidden;
}
li:after {
content: "visible pseudo-element";
position:absolute;
right:0;
}
http://jsfiddle.net/Fiddel/aopteq8m/
This is pretty hacky, and don't tell anyone I did this, but jsfiddle.net/57BGV.
li {
list-style: none;
text-indent: -65px;
}
li:after {
content: "Test";
display: inline-block;
padding-left: 80px;
}
One way to do it would be to change the font-color to whatever the background-color is. This won't remove the text from the flow but will hide it, which is what you're asking, technically.
Assuming your background is white:
li {
color: #FFF;
}
Is there any way to split so that between the lists I could get the space?
li{
display: table-row;
background: red;
}
demo
Here margin-bottom, padding-bottom not work. So how can I split the row?
question title is clearly describes that I need to split not just only the gap but should be separated.
Is this what you want?
ul {
border-spacing:5px;
}
li{
display: table-row;
background: red;
}
Any way I have solved my problem by using the pseudo class like this:
li{
display: table-row;
background: red;
}
li:after{
content: "";
padding-bottom: 15px;
display: block;
background: #fff;
}
demo
I have a strange trouble with css.
Take a look at the first element of the menù (Home) of this site (is a beta): http://nightly.gamempire.it/
I want to remove the "Home" word from the first element (and leave only the house icon).
I tried removing the word, but it break the style of the element.
If I set to the property
body > nav a.master { width: 30px; overflow: hidden; }
it break the style of all the menù.
What can I do?
Thanks
body > nav li {
display: inline-block;
vertical-align: middle;
}
body > nav a.master {
display: block;
height: 36px;
font-size: 0;
padding: 0;
}
Another option would be to do this:
nav li:first-child a {text-indent: -9999px;}
or also
nav li a.master {text-indent: -9999px;}