I'm trying to make a horizontal rule with some text in the left.
for example:
my title -------------------------------------
I can do it by putting a background to the text but without the colored background, I can not
Is anybody has an answer ?
<style>
h1 {
font-weight:normal;
line-height:0;
height:0;
border-bottom:1px solid #000;
vertical-align:middle;
}
</style>
<h1><span>my title</span></h1>
Thanks
Your suggestion of putting a background color on the span seems to work reasonably well. See it here.
Alternately, you could use a background image in place of the border on the h1.
h1 { background: url(http://i.stack.imgur.com/nomLz.gif) repeat-x left center; }
h1 span {
background-color: #FFF;
padding-right: 3px;
}
Example.
(A 1x1 black image for the background.1)
without using the background you could try with:
<style>
span:after{
content:"-------------------------------------";
}
</style>
<h1><span>my title</span></h1>
In this case you are using the CSS :after pseudo class.
Have a look to this article to check cross-browser compatibility.
And here you will find a pre-coded example.
Hope it helps!
Related
What's the most straightforward way to style HTML headings such that they are both underlined and horizontally centered? I don't want the underline to extend to the full width of the container, just the words. I also want the underline to be a different colour from the text and some distance away.
At the moment I am using a span inside the h2 to achieve this (in Sass):
h2 {
text-align: center;
span {
border-bottom: 2px solid #e6ebdf;
}
}
Is there a way to do so without an inner span or adding styles to the parent container? Here's the result. Note how the underline is (a) a different colour from the text and, (b) not tight against the bottom of the text the way it would be using text-decoration: underline:
Another idea is to use table to center and then apply a gradient where you can easily adjust the size, position and color:
h2 {
display:table;
text-align:center;
margin:auto;
padding-bottom:5px; /*control the distance*/
background:
linear-gradient(red,red) bottom /80% 2px no-repeat;
/* position /width height */
}
<h2>Hello</h2>
You can do this with the following:-
h2 {
text-decoration: underline;
text-align: center;
text-decoration-color: red;
text-underline-position: under;
}
<h2>Hello</h2>
Browser support maybe limited though, you may need to check.
I have already visited this:How to increase the gap between text and underlining in CSS but my approach uses tags. The OP in the above question uses a css text-decoration:underline the approaches provided there are different
I have a heading which is underlined in my webpage.
<h1><u>Hello</u></h1>
But the gap between the text and the underline is small so I tried this:
u
{
padding-top:10px;
}
and this:
u
{
margin-top:10px;
}
But the gap between the text and the underline is still the same. Any idea how I can increase the gap?
Try this solution:
u {
padding-bottom:10px;
text-decoration:none;
border-bottom:3px solid #000;
}
<h1><u>Hello</u></h1>
The problem of your way of finding the solution is that the u element is using text-decoration for the bottom border. This border can not be moved because it is on the text. The solution is to remove the text-decoration for this and add a own border at bottom. Now you can increase the space between the content of h1 and the border with padding-bottom.
If you want to use the u element on other elements normaly you have to write h1 u on your CSS.
The <u> tag has been deprecated in HTML 4 and XHTML 1, but it has been re-introduced in HTML5 with other semantics.
If you want to underline the text, you could create a wrap element like this:
<h1><span class="underline"><span>Hello</span></span></h1>
span.underline{
padding-bottom:3px;
border-bottom:3px solid black;
}
You could increase the gap between the text and the underline by changing the padding-bottom
<h1><a>Hello</a></h1>
a
{
vertical-align: top;
border-bottom-width: 2px;
border-bottom-style: solid;
text-decoration: none;
padding-bottom: 2px; //You can adjust the distance here.
}
http://jsfiddle.net/74vn0shc/
On the main menu, if a menu link is active, there is a border on the bottom. It works fine. I have the following CSS:
.active {
text-decoration: none;
border-bottom: 4px solid #888;
}
Currently the border-bottom is as wide as the text inside the list item. But I would like to make it much narrower. Is that possible?
Here is the HTML
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
</ul>
Try using the pseudo-element :after to achieve that, as I don't think it's possible to make the border narrower than the element's width.
Check this fiddle: http://jsfiddle.net/6QfNs/
A border can't be narrower than the element it is set on. So you can't achieve your aim with a border.
BUT
You can use a pseudo element, set the border on it and give it the desired width :
DEMO
CSS :
.active:after {
content:'';
display:block;
width:20px;
border-bottom: 4px solid #888;
}
The technique of using pseudo-elements is very familar and well-known in solving the problems of this kind. However I would like to introduce another way using linear-gradient background, just a share for every one:
/* span is your menu item here */
span {
font-size:20px;
padding:4px;
cursor:pointer;
}
span:hover {
background:linear-gradient(red,red) no-repeat;
background-size:60% 4px;
background-position:center bottom;
}
Demo.
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;
}
<style>
.btn{
display: inline-block;
padding: 15px 10px;
background: gray;
}
.btn:hover{
background:lightgray;
color:red;
}
</style>
<div class="btn">
text
</div>
works nicely. However if we have that:
<div class="btn">
text
</div>
it wouldn't work exactly as the first one. The anchor's text wouldn't be affected. Okay what if we add to the CSS:
.btn a:hover{
background:lightgray;
color:red;
}
That will work, but only if you hover exactly on the anchor, but still hover on the div rectangle wouldn't affect the anchor's text.
How can I tweak that without any javascript, so both rectangles acted identically?
http://jsfiddle.net/vaNJD/
UPD: adding !important keyword wouldn't help
Because all web browsers set a default color (and text-decoration) for a elements, you need a more specific selector to override the default. Try this instead:
.btn:hover, .btn:hover a {
background:lightgray;
color:red;
}
If you really want the two boxes to be identical, you would also need to override the un-hovered button as well:
.btn a {
color: black;
text-decoration: none;
}
It may also be worth pointing out that IE6 only supports the :hover pseudo-class on a elements. You may want to work around this by setting the a to display: block and adding the background color there.
You can accomplish the same effect by getting rid of the container and applying the .btn class directly to the a element. See the third box in this updated fiddle: http://jsfiddle.net/mlms13/vaNJD/5/
.btn:hover{
background:lightgray;
color:red;
}
.btn:hover a{
color: red;
}
Change to:
.btn:hover,
.btn:hover a{
background:lightgray;
color:red;
}
http://jsfiddle.net/vaNJD/4/
Like this?
.btn:hover a{
color:red;
}
I found one way in which you should set height for div tag and use it again for anchor tag and set anchor's display properties as block
for example
<style>
.divest
{
height:120px;
}
.divest a
{
display:block;
height:120px;
}
</style>
<div class="divest">here is hyperlink text</div>