Solved

css text-decoration:underline

Posted on 2009-05-06
7
440 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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

744 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now