This question already has answers here:
CSS strikethrough different color from text?
(15 answers)
Closed 2 years ago.
How can I change the color of the the strike-through line?
If I give the strike tag a class and then use CSS to change the color, it also changes the text color. I just want to change the color of the line and not the text.
h1 {
color: #4287f5;
}
.strike {
color: #eb1515;
}
<h1><s class="strike">£1000</s></h1>
You can use text-decoration-color, although browser support is spotty
s {
color: #4287f5;
text-decoration-color: #eb1515;
}
<s>Text</s>
Related
This question already has answers here:
Why doesn't my child element inherit color from its parent when parent has more specific selector?
(4 answers)
What is meant by "inherit" in css?
(3 answers)
Closed 1 year ago.
I'm currently doing a project for my uni class and I'm having a problem with the following part of my html+css code:
h1, h2, h3 {
color: #747d19;
}
.name_date {
color: #861781;
}
<div class="name_date">
<h3>Shean</h3>
<p><i><b>August 3rd, 2018</b></i></p>
</div>
The way I understand it, a class selector is more specific and thus overrides the element selector. But when viewing the result, the text "Shean" is formatted using the h3 color rule. What am I doing wrong?
That is true when the class selector is in h3 tag.
h3{
color: red
}
.purpleHeader{
color: purple
}
<h3 class="purpleHeader">La la la la...</h3>
To achive your goal you have write a more specific rule.
.purpleHeader h3 {
color: red
}
.purpleHeader {
color: purple
}
Now it is red 😀
This question already has answers here:
Remove blue underline from link
(22 answers)
Closed 1 year ago.
How can i get rid of the underline and the different color because i do not want it to show the hyper link
[1]: https://i.stack.imgur.com/SfcDC.png
You can use the following code.
Put this code in CSS file
a {
text-decoration: none;
color: red;
}
a:hover{
color: black; /* You can use etc. color when user hover on link its change color of text */
}
Click here
You can use the following code to remove the underline from the hyper link.
Use this code in .css file
a:link {
text-decoration: none;
}
or you can use inline css:
Click here
This question already has answers here:
Changing Underline color
(14 answers)
Closed 6 years ago.
<span>Teaching kids to reach their creative and intellectual potentials through Computer Science.</span>
Above is my HTML and below is my CSS:
span { text-decoration: underline; color: red }
If text-decoration is considered part of the foreground, than how can the text-decoration-color property change the text-decoration color without changing the color of the font?
Use -webkit-text-decoration-color to change it on Chrome. However, note that Experimental Web Platform Features has to be enabled for it to work. So for now, Chrome just simply does not support this css property.
You can't use text-decoration-color cross browsers.
See text-decoration-color support browsers. If you really needed to change the underline color maybe this link can help you. CSS text-decoration underline color
This can be achieved, however, it requires your text to be wrapped in a <span> tag.
Instead of using the <u> tag use text-decoration with underline as a value.
Code Snippet:
p {
color: red;
text-decoration: underline;
}
span {
color: gray;
}
<p><span>Teaching kids to reach their creative and intellectual potentials through Computer Science.</span>
</p>
This question already has answers here:
Change a HTML5 input's placeholder color with CSS
(43 answers)
Closed 9 years ago.
Is the any way to set different fonts for an input placeholder and value? I need to set diffrent fonts for my input placeholder and value because they use diffrent languages. The placeholder uses an right tonleft language but the vakue uses english. Is it possible in CSS3?
You can do this by targeting the placeholder text in css. Then setting color on the input to be something else
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder {
color: red;
}
::-moz-placeholder {
color: red;
}
:-ms-input-placeholder {
color: red;
}
JSFIDDLE
This question already has answers here:
How to increase the gap between text and underlining in CSS
(18 answers)
Closed 8 years ago.
i am using text-decoration:underline; but text and underline are touching each other.can i increase space between text and underline?
this one. i want to make space between text and underline.
Either use a different font or use a border-bottom instead so that you can control the space with padding-bottom.
I had same issue then i used :
.underline_text {
border-bottom: solid 2px #000000;
display: inline;
padding-bottom: 3px;
}