Issue
I'm trying to use CSS and HTML to create a text underline that's curved. The curve in particular has been referred to as a "swoosh" in the design brief I was given, it needs to fall short of the first and last letter (i.e. to underline "help you", it would start at "e" and end at "o" - this part I figure is easy, applying the style to a span tag without the first and last letter), and has to have rounded ends. The swoosh is also not even.
I'm not super crash hot with CSS, but I know I'm constrained to CSS and HTML in this case - no HTML5 or using javascript to get it done.
So far, I've only managed to come up with this:
.swoosh1 {
width: 500px;
height: 100px;
border: solid 5px #cb1829;
border-color: #cb1829 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
}
Which looks like this (don't worry about the font): :(
Does anyone have any pointers? Done it before?
Solution
You can use :after
pseudo-element to hold your underline:
.underlined {
position: relative;
margin-right: 1rem;
}
.underlined:after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
height: 7px;
width: 100%;
border: solid 2px #cb1829;
border-color: #cb1829 transparent transparent transparent;
border-radius: 50%;
}
.small {
font-size: 60%;
}
.big {
font-size: 200%;
}
<span class="underlined">Test</span>
<span class="underlined small">Test</span>
<span class="underlined big">Test</span>
Answered By - fen1x
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.