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;
}
Related
Here Is the link of the page on which I am working.
In the CONSULTANT section there is a list. I want to make the bullets size smaller.
I have done CSS:
.career ul li span {
font-size: 18px;
}
.career ul li{
font-size: 10px !important;
}
Please help me to make bullets size smaller.
Thanks
There is no <!DOCTYPE html> in your HTML page. so that you're not able to decrease Bullet size
#trainoasis is right, decreasing the font-fize for li works. Tried with ChromeDeveloper tools, but this CSS should do the trick.
.career ul li {
font-size: 0.5em;
}
You can use :before to create your own bullet and have it's own font-size
.career ul li {
list-style: none;
}
.career ul li:before {
content: '■';
vertical-align: middle;
display: inline-block;
margin-top: -3px;
font-size: 12px;
margin-right: 4px;
}
Fiddle
To reduce the size of bullet list, we can use before pseudo element.
For the list we have to give
ul{
list-style: none;
}
And then using pseudo element, we can create bullet as per our needed size and content
ul li:before {
content: ".";
position: absolute;
}
You can style the positions by giving top,bottom,left, right values.
If you have any queries please check,
http://frontendsupport.blogspot.com/2018/05/reduce-bullet-size-in-list.html
Code was taken from the above site.
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;}
I need to make a custom list-style markers. Now it's done by adding element before li, but exist one problem. The remaining lines should be aligned with the text for the marker, such as normal marked list, but they don't.
li p::before {
content: "* ";
}
How I make padding for second, third and etc lines, and make it cross-browser? (IE8+, FF3+, Opera 11+ and Crome)
li p:before { /* thanks Michael */
content: "* ";
float:left;
}
li p {
overflow:auto;
}
Maybe this will work. May I know why can't you use images (simple curiosity)?
EDIT: I was wrong, :before insert pseudo-element before content, so
<div id="wrap">
<ul>
<li><p>Get order of list items in a jQuery Sortable list after resort ... The trick is I would like to capture the order of the items immediately ... And I'm aware that it's also possible to assign a call-back function that fires when sorting st</p></li>
</ul>
</div>
#wrap
{
position: absolute;
top: 100px;
left: 100px;
}
li
{
list-style-type: none;
}
li p
{
overflow:auto;
}
li:before {
content: "* ";
float:left;
}
will work.
You can either set the p and li to float: left; (example 1)
li
{
list-style-type: none;
display: inline-block;
}
li p
{
display: inline-block;
}
or set the display to inline-block (example 2)
li
{
list-style-type: none;
display: inline-block;
}
li p
{
display: inline-block;
}
I'd like to create a horizontal navigation list of links, where the nav links are evenly spaced and take up the full width of the enclosing container <ul>. Nav links can be different widths. The first and last links should line up with the beginning and end of the <ul> respectively (meaning the links aren't centered), like this:
|left side..right side|
link1 link1 link3 link4
Unless I'm mistaken, I don't think there is a way to do this in CSS2. But is there a way to do it in CSS3? Otherwise I'll need to do it in Javascript.
If you insist on CSS3, you can do it with box-flex. Since this isn't fully implemented in all browsers, the properties still have the -moz and -webkit prefixes.
Here's the CSS to do it:
ul {
display: box;
}
li {
box-flex: 1;
}
But since not all browsers use it, you have to add -moz-box-flex, -webkit-box-flex, etc.
Here's a demo: http://jsfiddle.net/tBu4a/9/
That's straightforward to do with CSS2:
ul {
display: table;
width: 100%;
}
li {
display: table-cell;
}
a {
display: block;
}
Here's a working example. The problem isn't so much that CSS2 doesn't have a way to do it, it's that IE didn't fully support CSS2 until version 8.
--edit
OK, now I think I understand your requirements:
ul {
display: table;
width: 100%;
border: 0;
padding: 0;
background-color: blue;
}
li {
display: table-cell;
border: 0;
padding: 0;
text-align: center;
}
li:first-child {
text-align: left;
}
li:last-child {
text-align: right;
}
a {
display: block;
padding: 0.25em 0;
background-color: white;
text-decoration: none;
}
Here it is in action. I've zeroed out all the borders and padding as per your comments, you could add some back in but you would, of course, need to zero out the left border/padding of the first link and the right border/padding of the right link using either li:first-child or li:first-child a (and the opposite last-child ones).
on my website, I got a couple of images linking to various services. Today, I wanted to add the service-name under the image. The name is already in the title-attribute of the anchor-tag, so I thought this should be easy. I tried it like this:
a[title]:after{
content:"\A" attr(title);
font-size:10px;
text-decoration: underline;
}
The problem with that: The linebreak is ignored, the text is displayed inline. Is there any solution?
You can either use display: block to force the line-break, but this seems to require that the parent a is also display: block
a {
display: block;
}
a[title]:after{
display: block;
content: attr(title);
font-size:10px;
text-decoration: underline;
}
...or, you can use position: absolute;, though this means adding CSS to your a style definitions as well:
a: {
position: relative;
/* ...everything else...*/
}
a[title]:after{
position: absolute;
top: 1em; /* assuming your 'a' font-size is 1em, with no line-height/padding, adjust to taste */
left: 0; /* assuming you want it aligned with the left-hand side of the parent 'a' */
content: attr(title);
font-size:10px;
text-decoration: underline;
}
Demo added to JS Bin