Q:
How to make text underlined in a text element?
I have the below html and css, when I do the mouse-over and mouse-out the css is not in effect.
.title {
color: black;
font-weight: normal;
}
.sub-title {
color: black;
font-weight: bold;
}
.under-title {
border-bottom: 2px dotted black;
}
Product Category
Product
Product description
How can I make the description under product underlined when the mouse is over the product?
A:
You can do this with CSS Pseudo Elements
.title {
color: black;
font-weight: normal;
}
.sub-title {
color: black;
font-weight: bold;
}
p {
text-decoration: none;
position: relative;
padding-top: 10px;
}
p::before {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: black;
left: 0;
bottom: -10px;
margin-bottom: 20px;
}
.under-title {
display: block;
border-bottom: 2px dotted black;
}
Product Category
Product
Product description
Fiddle: https://jsfiddle.net/o4qdnsrL/2/
A:
You can make use of ::before pseudo element and apply border to it.
.title {
color: black;
font-weight: normal;
}
.sub-title {
color: black;
font-weight: bold;
}
.under-title {
border-bottom: 2px dotted black;
position: relative;
}
.under-title:hover::before{
border-bottom:2px dotted red;
}
Product Category
Product
Product description
A:
This can be done simply with CSS by using :hover on the p elements.
Here's an example with :hover:
.title {
color: black;
font-weight: normal;
}
.sub-title {
color: black;
font-weight: bold;
}
.under-title {
border-bottom: 2px dotted black;
}
.under-title:hover{
border-bottom:2px dotted red;
border-top:2px dotted red;
}
Product Category
Product
Product description
And here's the same example with javascript (to illustrate that we can avoid the use of javascript if we don't need it)
.title {
color: black;
font-weight: normal;
}
.sub-title {
color: black;
font-weight: bold;
}
.under-title {
border-bottom: 2px dotted black;
}
.under-title:hover{
border-bottom:2px dotted red;
border-top:2px dotted red;
}
Product Category
Product
Product description
Here's a jsfiddle that works with no javascript.
And one that doesn't.
I'll leave this here since it seems to be what you're after.
Edit 1:
If you want to be able to select the first underlined item and second underlined item independently, you'll have to add a class to the elements, which will do just that.
The code would be something like this.
.title {
color: black;
font-weight: normal;
}
.sub-title {
color: black;
font-weight: bold;
}
.under-title {
border-bottom: 2px dotted black;
}
.under-title:hover{
border-bottom:2px dotted red;
border-top:2px dotted red;
}
.under-title.first{
border-bottom:2px dotted red;
}
.under-title.second{
border-top:2px dotted red;
}
Product Category
Product
Product description
Second item
Second item
