I want to style only one character inside the content of an ::after. Is it possible? Considering that the div has content inside.
In this example I want the "↵" to be bold. But not the "press ENTER" text.
.div::after {
content: "press ENTER ↵";
font-size: 11px;
color: #5a5b8d;
}
If there is no other text in the button, you could split your text in between the before and after:
.button {
font-size: 11px;
color: #5a5b8d;
}
.button::before {
content: "press ENTER";
}
.button::after {
content: " ↵";
font-weight:bold;
}
<div class="button"></div>
It's crazy, but this will work. Working example: http://jsfiddle.net/Lf8xvcyq/1/
Try this:
HTML:
<div class="button"></button>
CSS:
.button {
/* Your normal CSS */
}
.button::first-letter {
font-size: 11px;
font-weight: bold;
color: red;
}
.button::after {
unicode-bidi:bidi-override;
direction:rtl;
content: "↵ RETNE sserp";
font-size: 11px;
color: blue;
}
You can consider flexbox and the order property in case you will have content then you will be able to use both pseudo element:
button {
font-size: 11px;
color: #5a5b8d;
display:flex;
}
button::before {
content: "press ENTER";
order:1;
padding:0 2px; /*flexbox erase whitespace so we add padding*/
}
button::after {
content: "↵";
padding:0 2px;
font-weight:bold;
order:1;
}
<button >some content</button>
Related
This question already has answers here:
How do I not underline an element in a link?
(2 answers)
Closed 2 years ago.
I'm not able to remove the underline from the :before element.
As you can see from the image, I set the underline of the link during the focus event, but I'd like to have the only text underlined and not the icon.
This is the code for the icon:
a:before {
content: "\f058";
font-family: FontAwesome;
}
This is the code for the focus effect:
a:focus{
text-decoration:underline;
}
I tried something like this but it didn't work.
a:before:focus {
text-decoration:none;
}
Use a span inside the link and apply text-decoration: underline on the inner element
a {
text-decoration: none;
}
a span {
text-decoration: underline;
padding-left: .5em;
}
a::before {
content: "\f058";
font-family: FontAwesome;
}
<span>Lorem ipsum</span>
if you cannot change the markup then you have to fake this behaviour, e.g. using a border with a pseudoelement
a {
text-decoration: none;
position: relative;
}
a::before {
content: "\f058";
font-family: FontAwesome;
width: 2ch;
display: inline-block;
}
a::after {
content: "";
position: absolute;
border: 1px solid currentColor;
left: 2ch;
bottom: 0;
right: 0;
}
a:focus::after {
border: none;
}
Lorem ipsum
Text-decoration when applied on a link "a", will result in the underlining on the icon too. Instead, you can use : The Unarticulated Annotation (Underline) element in your HTML code.
HTML code:
<u>Lorem Ipsum</u>
and then, style the in CSS:
u{
text-decoration: underline;
}
I have this code:
<style>
.caps {
text-transform: capitalize
}
.stuffBefore:before {
content: 'a';
}
</style>
<div class="caps"><span class="stuffBefore"></span>
<span>stuff after</span></div>
What I'm basically trying to achieve is to show
aStuff After
but what i actually get is
Astuff After
I can't add a space between "a" and "stuff" (get this as an example of the problem, the real problem is a little more complex) but i thought the "span" tag would act as a separator, like the whitespace.
Can I achieve it by adding further CSS?
Here is one way :
JsFiddle : https://jsfiddle.net/8vzmv06p/
.caps {
text-transform: capitalize;
position:relative;
}
.caps > span{
float:left;
}
.stuffBefore:before {
content: 'a';
text-transform: none;
}
<div class="caps"><span class="stuffBefore"></span>
<span>stuff after</span></div>
.caps > span{
float:left;
}
.stuffBefore:before {
content: 'a';
}
.stuffBefore + span {
text-transform: capitalize;
}
<div class="caps"><span class="stuffBefore"></span><span>stuff after</span></div>
You can try this
.caps {
text-transform: capitalize
}
.stuffBefore:before {
content: 'a';
float: left;
text-transform: none;
}
<div class="caps"><span class="stuffBefore"></span>
<span>stuff after</span></div>
You need the .stuffBefore span? If not necessary you can simplify your code:
.caps span {
text-transform: capitalize;
}
.caps span:before {
content: 'a';
text-transform: none;
float:left;
}
<div class="caps">
<span>stuff after</span>
</div>
Even without span:
.caps {
text-transform: capitalize;
}
.caps:before {
content: 'a';
text-transform: none;
float:left;
}
<div class="caps">
stuff after
</div>
I have a link which has a small drop down arrow after it, added using :after.
What I want to do is change the color of the arrow when I hover over the link, is this possible?
This is what I'm trying but doesn't work:
.detail__changer {
color: #333;
cursor: pointer;
text-decoration: underline;
font-size: 33px;
}
.detail__changer:after {
color: #333;
content: ' ▾';
}
~ .detail__changer:hover:after {
color: red !important;
}
Here's a fiddle
Also, I have seen this question, my question is not the same
Remove the tilde
.detail__changer {
color: #333;
cursor: pointer;
text-decoration: underline;
font-size: 33px;
}
.detail__changer:after {
color: #333;
content: ' ▾';
}
.detail__changer:hover:after {
color: red !important;
}
<div class="detail__changer">Hover over me</div>
Is there a simple way to reverse the colour order when hovering?
Using this trick here I have the order right > left:
&:hover,
&:hover ~ button {
color: red
}
The fiddle with the right > left: https://jsfiddle.net/celio/Lowc1ruh/
Example with the left > right: https://css-tricks.com/examples/StarRating/
It is impossible for me to use float, position: absolute; and anything that changes the right order of my current html.
Plain CSS example:
button {
margin: 0;
padding: 5px;
border: none;
background: transparent;
display: inline-block;
}
button:before {
content: "⋆";
font-size: 5rem;
line-height: 1;
}
button:hover,
button:hover ~ button {
color: red;
}
<div class="wrapper">
<button></button>
<button id="2"></button>
<button></button>
<button></button>
<button></button>
</div>
One way would be to make all the child button elements color: red; when hovering over .wrapper. Then use the sibling selector (~) to change any elements after the currently hovered element to color: black;.
You should remove any whitespace between the elements (in this case I put them into one line in the HTML) to ensure that the cursor is always hovering over a star.
Example with plain CSS:
.wrapper button {
margin: 0;
padding: 5px;
border: none;
background: transparent;
display: inline-block;
}
.wrapper button:before {
content: "⋆";
font-size: 5rem;
line-height: 1;
}
.wrapper button:hover ~ button {
color: black;
}
.wrapper:hover button {
color: red;
}
<div class="wrapper">
<button></button><button id="2"></button><button></button><button></button><button></button>
</div>
JS Fiddle using SASS
Let's say we have this:
.first-class {
background: purple;
font-weight: bold;
color: white;
}
.first-class > .second-class {
/* code goes here */
}
In .second-class, Is it possible to only inherit one property from first-class, say, background, while leaving the other properties as default?
No. You have to reset them. .first-class being the parent of .second-class will take its inheritance.
Here is the WORKING EXAMPLE to illustrate your scenario before reset.
Now when you reset it.
Find the below code before and after reset.
Before reset:
The HTML:
<div class="first-class">
<div class="second-class">abcd</div>
</div>
The CSS:
.first-class {
background: purple;
font-weight: bold;
color: white;
}
.first-class > .second-class {
/* code goes here */
}
After Reset:
The HTML:
<div class="first-class">
<div class="second-class">abcd</div>
</div>
The CSS:
.first-class {
background: purple;
font-weight: bold;
color: white;
}
.first-class > .second-class {
background: inherit;
font-weight:normal;
color:black;
}