Solved

css text-decoration:underline

Posted on 2009-05-06
7
453 Views
Last Modified: 2012-05-06
i underline a text in css like this
h1{
      text=decoration: underline;
}
but how do i set the color  and size of the underline just like we have these properties for border-bottom
border-bottom: 1px solid gray;
0
Comment
Question by:SunScreenCert
  • 3
  • 2
  • 2
7 Comments
 
LVL 4

Expert Comment

by:aconrad
ID: 24321674
You use border to change the underline.
You can use hover to change colors for mouse over/out

http://www.hyperlinkcode.com/change-underline-color.php
:
<a href="change-underline-color.php" style="text-decoration: none; border-bottom: 1px solid #999999">change underline color</a>
0
 
LVL 2

Author Comment

by:SunScreenCert
ID: 24321891
But if i use border, it creates a border across the whole width of the screen and text-decoration  creates only below the text, so i cannot use border here
0
 
LVL 4

Expert Comment

by:aconrad
ID: 24321997

This code doesnt do a border across the whole width of the screen :

<a href="change-underline-color.php" style="text-decoration: none; border-bottom: 1px solid #999999">change underline color</a>
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 42

Accepted Solution

by:
David S. earned 50 total points
ID: 24322039
You could give the h1 display:inline or float:left to make it only as wide as needed.
0
 
LVL 2

Author Comment

by:SunScreenCert
ID: 24322106
i don't want to add php code right now
0
 
LVL 2

Author Comment

by:SunScreenCert
ID: 24322108
how to do it using display:inline
0
 
LVL 42

Expert Comment

by:David S.
ID: 24322199
aconrad said nothing about using PHP. He just linked to an example.

Try this:
h1{
  display: inline;
  border-bottom: 1px solid #999999;
}

Open in new window

0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question