This question already has answers here:
Is there any way to make the HTML underline thicker?
(5 answers)
Closed 8 years ago.
I have some bold text and would like to underline to appear bold as well.
HTML
<p>Home Page</p>
CSS
p {
text-decoration: underline;
}
jsFiddle
I tried several thing but they didn't work well.
You can use border-bottom with some padding:
display:inline-block;
border-bottom:solid 2px red;
padding-bottom:2px;
JSFiddle
Edit:
To achieve the effect you want, you can wrap the text with a <span>: JSFiddle
One possible approach is to use pseudo-element :after to mimic border. Benefit in this case is that it's easy to control "border" offset with margin-top. For example:
p {
display: inline-block;
}
p:after {
content: '';
display: block;
height: 2px;
background: red;
margin-top: -1px;
}
<p>Home Page</p>
Related
This question already has answers here:
Style child element when hover on parent
(4 answers)
Closed 5 years ago.
Changing a color of a element by hovering the mouse over
I have the following HTML
<p class="ItemMenu ">Inicio</p>
<p class="ItemMenu ">Cadastro</p>
and CSS
.ItemMenu:hover
{
color:white !important;
background:#74BAF0;
}
how do I get my mouse inside the <p> my <a> text is white?
.ItemMenu:hover a
{
color:white !important;
background:#74BAF0;
}
This should work for you!
To affect another element inside an element, you can try
.ItemMenu:hover a { color: red; }
HTML:
<p class="ItemMenu">On hover over paragraph</p>
<p class="ItemMenu2">On hover over link</p>
CSS:
p.ItemMenu:hover
{
color: black;
background: #74BAF0;
}
p.ItemMenu:hover a
{
color: black;
}
p.ItemMenu2 a:hover
{
color: black;
background: #74BAF0;
}
https://codepen.io/anon/pen/oprPYR
But if you want to change the background of p after hover a... No, you can't do it - try to do it with using JS
This question already has answers here:
Flex / Grid layouts not working on button or fieldset elements
(3 answers)
Closed 6 years ago.
As the title says I have a <button> tag which has the CSS display: block; which should automatically make the element span the width of the container right? I have other buttons on the page but they are <a> tags but with the same css class as the <button> tag.
Website can be found here: http://www.cqwebdesign.co.uk/stirlinggrey/ as you can see each section as a button link at the bottom. However the one in quest is at the bottom of the page in the section with the title: "TO RECEIVE YOUR FREE GUIDE AND QUOTE"
Codepen version: http://codepen.io/anon/pen/zoOQQL
HTML:
This is a button
<button class="btn">This is a button</button>
CSS:
.btn {
font-size: 16px;
font-family: Open Sans;
color: #fff;
border: 0;
background: #000;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
line-height: 1.5;
display: block;
margin-bottom: 10px;
}
Thanks
If your issue is that the button needs to be centred, you need to do clear: both; in order to clear it from being affected from the floated elements above.
Block level elements take up the full width, but it does not affect the width of the element itself. Use the width: ; tag to change this.
Hope this helps :)
This question already has answers here:
Simple CSS button with a rectangle beneath
(4 answers)
Closed 9 years ago.
I'm trying to create a CSS based 'button' like this:
The blue is just a background, so it's only about the text "Welkom" and the rectangle displayed below.
Whenever it's active or hovered over it should display a rectangle BELOW the button.
HTML: (This is the button)
<li>Welkom</li>
If the below is your HTML:
<li>Welkom</li>
Then you can do this:
li:hover,li:active{
border-bottom:3px solid blue; /*change blue to the color you want*/
}
See this demo
Fiddle in response to comment: Fiddle 2
The above uses box-align property(http://www.w3schools.com/cssref/css3_pr_box-align.asp) to center the bottom border(without requiring adjustment) but it will not work in IE9 and below
Fiddle 3 : Will work in all browsers but you will have to adjust the bottom at the center using relative positioning for both li and a tag within it.
you can do that on :hover with a border-bottom:
But you may and a border already without the hover so avoid jumping.
a {
border-bottom: 5px solid transparent;
}
a:hover {
border-color: blue
}
The code above is not all you may need.
-Sven
EDIT: as you see the other answer, U ay do that on the list element directly.
simple just follow below code:
HTML:
<div class="link">Welkom</div>
CSS:
.link { background-color:#379AE6; width:100%; padding:8px; padding-bottom:16px; }
.link a{ font-family:arial; text-decoration:none; color:#fff;
}
.link a:hover{ border-bottom:8px solid #6BBBF8; padding-bottom:8px;
}
This question already has answers here:
How to make my font bold using css?
(10 answers)
Closed 8 years ago.
Answers to this question show how to prepend/append text to a HTML element contents using CSS. Is there a way to make the CSS-added text bold without making the original HTML element contents bold as well?
Sure:
.OwnerJoe:before {
content: "Joe's Task:";
font-weight: bold;
}
Try:
#foo:after
{
content: 'hello!';
font-weight: bold;
}
Fiddle
Try this:
<div class="test">stuff</div>
.test{
border:1px solid #000;
}
CSS:
.test:before {
content: "more stuff";
background:red;
font-weight:bold;
}
Fiddle
All the information was in the link you posted, by the way. You just needed to add the font-weight to the right area.
That is of course possible
Just set appropriate styles to your pseudo element.
<span>World</span>
And the CSS:
span:before {
content: "Hello";
font-weight: bold;
}
Here's a working JSFiddle.
This question already has answers here:
CSS strikethrough different color from text?
(15 answers)
Closed 8 years ago.
I’d like to have gray text with a red strike-through, but this style doesn’t work:
color: #a0a0a0;
text-decoration: line-through 3px red;
What am I doing wrong?
You can simulate the desired effect with two nested elements, e.g.:
span.inner {
color: green;
}
span.outer {
color: red;
text-decoration: line-through;
}
<span class="outer">
<span class="inner">foo bar</span>
</span>
jsfiddle
With no extra DOM (but may not work for some layouts for obvious reasons):
<style type="text/css">
.strikethrough {
position: relative;
}
.strikethrough:before {
border-bottom: 1px solid red;
position: absolute;
content: "";
width: 100%;
height: 50%;
}
</style>
<span class="strikethrough">Foo Bar</span>
A jsfiddle example here.
There is another way of looking at the meaning of the CSS2 specification; and that is the outer text-decoration will set the color of the "line-through" and text, but an inner color declaration (in a 'span' tag) can be used to reset the text color.
<p style="text-decoration:line-through;color:red">
<span style="color:#000">
The "line-through" and "color" are declared in 'p', and the inner 'span'
declares the correct color for the text.
</span>
</p>
It's not possible to make a line-through with a different color. It will be in the color you define with property color.
see http://www.w3.org/TR/CSS2/text.html#lining-striking-props
EDIT:
what came into my mind is to use a background-image with a 1px * 1px color dot in the color you like.
CSS:
.fakeLineThrough {
background-image: url(lineThroughDot.gif);
background-repeat: repeat-x;
background-position: center left;
}
HTML:
<span class="fakeLineThrough">the text</span>
The CSS2 specs says
The color(s) required for the text decoration must be derived from the 'color' property value of the element on which 'text-decoration' is set. The color of decorations must remain the same even if descendant elements have different 'color' values
I guess that means that you can't do it that way.
A workaround could be using some kind of border, and lifting it?