I'm trying to understand the CSS selector ::after and ::before.
.h2 a:before{
content: "\f0c1";
font-family: FontAwesome;
font-size: 14px;
}
This adds a FontAwesome icon if said header is a link. However, I'd like to add an empty space after adding this icon. Is this possible with CSS?
Do with "margin-right" property
Related
A lot of sites use the ::before selector on an element to load icons via a client-downloaded font file, e.g.
div {
font: 14px/1 FontAwesome;
}
div::before {
content: "\f1c8";
}
Unfortunately the following rule also applies to the element's ::before pseudo-element, which breaks the icon display:
div {
font-family: sans-serif !important;
}
It's not possible to :not(::before) (source), so how would you go about targeting an element, but not it's ::before?
This worked decently, but it misses the text (if any) inside the element:
div:not([class*="fa-"]) {
font-family: sans-serif !important;
}
It may not even be possible. No JavaScript, please.
It's not possible without then again overwriting the before and after again
div {
font-family: sans-serif;
}
div::before,
div::after {
font-family: serif;
}
Or you could just use the icon in another element entirely.
<span class="fa-something"></span>
<span>Text here</span>
And a s a sidenote :)
Please use textelements for text, not divs (and span is also not a text element, it simply is an inline element without any semantic information)
With #Termani's help above, this is how I solved the problem of injecting my preferred font into websites while doing minimal damage to most site's icons loaded via webfont files:
::before, ::after {
font-family: FontAwesome, "Font Awesome", "Font Awesome 5 Pro",
"Font Awesome 5 Free", "Material Icons", "Material-Design-Iconic-Font",
Flaticon, "CBSi Fantasy icomoon", CBSi_Fantasy_icomoon, icon-moon,
icomoon, ui-icons, icons, NewYorkIcons, sans-serif !important;
}
Without doubt there are other font-family names that developers use, so the list will grow as I stumble upon them.
I'll update this answer if I find a better solution.
<ul class="points">
<li>sdsds</li>
<li>sdsds</li>
</ul>
I am changing the list style to font awesome icon i want every second list item to be of different color therefore I have used nth-child(even) but it is not working along with before selector.
.
points li:before {
content: "\f1b2";
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em;
width: 1.3em;
color: #ba2b9f;
}
.points li:before:nth-child(even) {
color: red !important;
}
I'm writing an answer, although I expect this question to get closed:
You have the selectors in the wrong order.
What it should be:
li:nth-child(even)::before
This translates to: every even li child, affect the before pseudo.
The original
li:before:nth-child(even)
This translates to: an even element of a before psuedo. This will never work as there can only be one before (and after pseudo element).
I have a number of div's, each needing a different content attribute in the :after element.
It is not possible for me to style each div individually, because the amount of div's is rather large.
My question: Can I pass the attribute in the html tag itself?
Say I have
Engels
With an :after styling like
content: "this needs to change";
display: inline-block;
color: #A9B0BB;
float: right;
font-style:italic;
How can I pass on the this needs to change string in html? Is there a better way to do this? (preferably without using js)
You could use an attribute for it:
<a title="this will be displayed in the :after">test</a>
CSS:
a:after {
content: attr(title);
display: inline-block;
color: #A9B0BB;
float: right;
font-style: italic;
}
Fiddle
I am using :before to display webfont icons before menu items. For some reason :before is only working on one class and is completely ignoring the other class. If I change both classes on the two li's that should have icons before them to the working class name, the icon shows up.
Ideas?
Here is an example:
http://jsfiddle.net/bigdmachine/erxjE/1/
I'd rather update the CSS to;
nav#al-top-menu .log-out a:before,
nav#al-top-menu .setting a:before {
content: "X";
margin-left: 15px;
margin-right: 5px;
font-family: 'WebSymbolsRegular';
font-size: 14px;
color: blue;
}
I don't think you can create "free" pseudo-elements inside of an <ul> like that, the list should only contain list items.
As title, I'm adding icons using .icon-*. When adding an icon to an hyperlink:
Email me!
The content inserted by content property shows the underline text-decoration on hover. I'd like to disable the text-decoration only for the content before:
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: 'IcoMoon';
font-style: normal;
speak: none;
}
.icon-mail:before {
content: "\37";
}
[class^="icon-large-"]:before, [class*=" icon-large"]:before {
font-size: 48px;
line-height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
margin-right: 5px;
vertical-align: middle;
}
I've tried this but it's not working (decoration is still visible):
a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before {
text-decoration: none;
color: white;
}
Insert display:inline-block; in your css. Something like the one below:
.icon-mail:before {
content: "\37";
display:inline-block;
text-decoration:none;
}
Here is the JS FIDDLE:
http://jsfiddle.net/73p2k/18/
As the :before pseudo-element is rendered as a descendant box (more specifically, just before the first child content box) of its generating element, it obeys the same rules its normal descendant boxes do with respect to text-decoration:
The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.
See these answers for more details:
CSS text-decoration property cannot be overridden by child element
How do I get this CSS text-decoration override to work?
There isn't any good way around this... the only alternatives that come immediately to mind are:
Wrap the text in its own span element, then apply text-decoration to that span, as shown by skip405. The disadvantage is, of course, extra markup.
Use an inline block background image instead of inline text in an icon font with your :before pseudo-element (I've also corrected the inconsistencies with your class selectors):
[class^="icon-"]:before, [class*=" icon-"]:before {
display: inline-block;
width: 1em;
height: 1em;
background-size: contain;
content: "";
}
.icon-email:before {
background-image: url(icon-mail.svg);
background-repeat: no-repeat;
}
.icon-large:before {
width: 48px;
height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
margin-right: 5px;
vertical-align: middle;
}
The advantage this has over skip405's solution is that you don't have to modify the HTML, but given that it uses SVG vector background images and background-size, it won't work in IE8.
If you do need IE8 support, then you have to fall back to bitmap images:
.icon-email:before {
background-image: url(icon-mail.png);
}
.icon-email.icon-large:before {
background-image: url(icon-mail-large.png);
}
A pseudoelement selector must be the last item in a selection chain.
You can apply a style to element:hover:before but not to element:before:hover.
You can set height & overflow:hidden for :before element, and text-decoration will not be visible :)
Tried some things using just the a tag as a markup, but alas. A possible workaround for you may be to inner wrap the link in another element, a span, for instance. Thus you can have the underline on this element (instead of a pseudoelement) - which is perfectly controlled by css.
A live example is here: http://jsfiddle.net/skip405/fQHUH/
This solution worked for me. It excluedes the pseude-elements.
But for this you need to wrap the content of the <a> tag into an extra element.
a:hover { text-decoration: none; }
a:hover > * { text-decoration: underline; }
<span>content</span>