How can I add an underline to an inline-element in CSS, that is (1.) "stylable" and (2.) at the baseline (unlike solutions using only border-bottom or box-shadow)?
This is for a responsive layout, so the underline has to be able to reach over multiple lines. Also, it cannot displace any other (not underlines) text that might be inline with the link.
This is a mock-up to demonstrate the desired effect.
Thanks in advance!
I think you'd want to use a pseudo element to style your underline. I threw a simple animation too on hover to showcase its flexibility.
h1 {
position: relative;
}
h1::before {
content: "";
position: absolute;
left: 0;
bottom: 5px;
z-index: -1;
background: aqua;
height: 2px;
width: 200px;
transition: width 0.3s;
}
h1:hover::before {
width: 300px;
}
<h1>This is a styleable baseline</h1>
I don't know why you aren't able to use border-bottom but try this:
<!DOCTYPE html>
<html>
<style>
</style>
<body>
<a><u>LINK OVER </u><br><u>MULTIPLE</u> LINES</a><br><br>
<a><span style="border-bottom: blue solid 3px;">LINK OVER
<br>MULTIPLE</span> LINES</a><br><br>
<a><span style="text-decoration: underline; text-decoration-color:
blue;">LINK OVER<br>MULTIPLE </span> LINES</a>
</body>
</html>
For everyone interested, this is the solution I came up with. It only works on a solid background.
background: linear-gradient(white, white), linear-gradient(blue, blue);
background-position: 0px calc(1em + 5px), 0px 1em;
background-repeat: repeat-x;
color: black;
background-color: white;
Related
Let's say I have an image like this:
I would like to display transparent letters and fill everything to look something like this:
UPDATE: I would like to display a text with an image one it, that would look like this:
How can I accomplish that using CSS? Thank you in advance!
Use css background-clip property.
Example code:
h1 {
color: white; /* Fallback: assume this color ON TOP of image */
background: url('https://i.stack.imgur.com/QqRWG.jpg') no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 200px;
}
<h1>404</h1>
Hope it helps !
you should experiment with css "mix-blend-mode"
In your case css will look like:
background-color: #fff;
color: #000;
mix-blend-mode: screen;
You can check the demo:
body{
background: url('https://i.stack.imgur.com/QqRWG.jpg')
}
p{
background-color: #fff;
color: #000;
mix-blend-mode: screen;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-family: arial;
font-size: 10em;
margin: 0;
line-height: 100vh;
text-align: center;
}
<p>404</p>
CSS has background-clip for this kind of styling:
text
The background is painted within (clipped to) the foreground text.
background-clip among flex and calc can do a simple 404 error page:
h1 {
background:url(https://i.stack.imgur.com/QqRWG.jpg) center;
color:transparent;
background-clip:text;
/* makup for a basic 404 page */
font-size:calc(15vh + 15vw);
display:flex;
height:100vh;
align-items:center;
justify-content:center;
}
* {
margin:0;
}
<h1>404</h1>
I would like to have a colored underline that looks like this when it breaks:
text-decoration-color seems to be not supported widely enough.
I tried this:
.underline {
position: relative;
}
.underline:after {
position: absolute;
content: '';
height: 1px;
background-color: #ffc04d;
bottom: .1rem;
right: 0;
left: 0;
z-index: -1;
}
<h1><span class="underline">Sprouted Bread</span></h1>
What about a linear-gradient where it will be easy to control color, size and distance within a single element:
.underline {
position: relative;
font-size:28px;
background:
linear-gradient(yellow,yellow) /* Color */
left 0 bottom 2px/ /* Position */
100% 2px /* Size (width height)*/
no-repeat;
}
<div style="width:150px;text-align:center"><span class="underline">Sprouted Bread</span></div>
As a side note, border-bottom works fine used with inline element but of course you cannot easily control the distance to make it behave as a text-decoration:
.underline {
position: relative;
font-size:28px;
border-bottom:2px solid yellow;
}
<div style="width:150px;text-align:center"><span class="underline">Sprouted Bread</span></div>
Try this JSFiddle
By wrapping the elements like you have in a span. You can put the text decoration on the parent element and the text color on the span.
HTML:
<h1><span class="underline">Some Text</span></h1>
CSS:
h1 {
text-decoration: underline;
color: red;
}
.underline {
color: blue;
}
Just add a border!
Using display: inline, add a bottom border and space it with padding.
You could also use line-height and then place negative margins to increase the space in between the lines.
And...you could also animate it!
.underline {
position: relative;
padding-bottom: 1px;
border-bottom: 1px solid #ffc04d;
}
<h1 style="width: 5em">
<span class="underline">Sprouted Bread</span>
</h1>
As mentioned by #chriskirknielsen, you could use box-decoration-break, although not supported by IE or Edge. Credits: #Temani Afif
I tried to make an under-line dotted under word to mark it as user provided information.
It is fine to use a pre-defined html under-line tag <u>..</u> with styling dotted or style border-bottom. However, it is a little bit problem with printing (the dotted not showing correctly); Therefore I decided to use dotted symbols ... instead because it is showing correct and precise.
By that way, I tried to make the word takes place of dotted points' spaces, and dotted point would stay a little bit lower from it current position under the word.
To make it clear, it would look like this:
My HTML Code do to this is like so:
.dotted:before{
content: '..................';
position: absolute;
top: 20px;
}
<p>Name: <span class="dotted">Jonh David</span></p>
However, as the information provided by user is varied, I cannot determined how many dotted points I would need to fit those information correctly.
Your tip is very much appreciated. Thanks.
Can use border-bottom-style css property
.dotted {
border-bottom: 1px solid #000;
border-bottom-style: dotted;
}
https://jsfiddle.net/j965444n/
I found this really cool site for doing this. Refer the site below.
Styling Underlines
You can play around with the properties and get the desired thickness and padding, also this is not dependent on setting the width based on the content size!
Check my below example of how this is done!
.dotted {
background-image: linear-gradient(to right, #000000 50%, transparent 50%);
background-position: 0px 100%;
background-repeat: repeat-x;
background-size: 4px 2px;
padding: 0px 3px;
}
<p>Name: <span class="dotted">Jonh David</span></p>
I think it's something like this:
#myDIV {
text-decoration: underline;
text-decoration-style:dotted;}
w3schools underline
Note: The text-decoration-style is only supported by Firefox.
If a simple dotted border isn't good enough for you and say you want to control the spacing between the dots - you could make your technique work by setting overflow:hidden on the parent element.
.dotted {
position: relative;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
}
.dotted:before {
content: '...............................';
position: absolute;
top: 4px;
width: 100%;
letter-spacing: 2px; /* adjust to control spacing between dots */
}
<p>Name: <span class="dotted">Jonh David</span></p>
<p>Name: <span class="dotted">Jo</span></p>
<p>Name: <span class="dotted">Jonh David blabla</span></p>
I wonder what is the problem with underline or you could try border-bottom: 1px dotted #444 but whatever, here's your method - a span with dotted :pseudo - which takes into account the length of the element.
content is a lot of … (use dots if you wish)
it's cropped with overflow: hidden
test cases with 2 very different lengths
3rd example is good ole dotted border (works since IE7)
.dotted {
position: relative;
}
.dotted:before{
content: '…………………………………………………………………………………………';
display: block;
position: absolute;
top: 3px;
left: 0; right: 0;
overflow: hidden;
}
.other-dots {
border-bottom: 1px dotted black;
}
<p>Name: <span class="dotted">Jonh David</span></p>
<p>Name: <span class="dotted">Maria-Magdalena von Stroheim de la Peña</span></p>
<p>Name: <span class="other-dots">Other way with bd-bottom</span></p>
I think #Christopher Marshall's idea is gonna make the same effect on printed page, so here is an example with background : https://codepen.io/Pauloscorps/pen/YrwWYo
HTML
<p>My name is : <span>John David</span></p>
CSS :
p {
span {
display:inline-block;
font-weight:bold;
&:after {
content:"";
display:block;
width:100%;
height:1px;
background:red url('https://img11.hostingpics.net/pics/194508dot.jpg') repeat center bottom;;
}
}
}
I use bottom-border on some a element, and I want to add some horizontal offset to the border.
What I have now:
Link very cool name
-------------------
What I want:
Link very cool name
----------------
How can I archive this? Only using an a element.
A pseudo-element is ideal here which can be styled in any fashion you want, color, width & height...even position below the link text.
a {
position: relative;
text-decoration: none;
}
a::after {
content: "";
position: absolute;
top: 100%;
right: 0;
width: 75%;
height: 2px;
background: orange;
}
Long stretch of text
You can try this:
a{
text-decoration: none;
display:inline-block;
}
a:after{
content: "";
border-bottom: dotted 2px red;
width: 70%;
float: right;
padding-top: 5px;
}
https://jsfiddle.net/9xc0x58c/1/
You could use a pseudo element ie :after element for this and abs pos it, 1px high background colour and width of you chosen link length etc.
Would that be the required result? Not sure the requirement as to why you would want this but it should achieve the required result.
you can use span
HTML
Link <span class="un">very cool name</span>
CSS
.un{
border-bottom: dotted 2px red;
}
I'm having trouble figuring out how to apply a split border on an element using CSS.
The effect I'm trying to achieve is this:
Where the red line and the grey line take up a % of the elements width. Preferably, I would like to apply this effect to an element using a single class.
Edit: for those asking for a code sample:
<!-- spans width 100% -->
<div id="wrapper">
<h1 class="title">DDOS Protection </h1>
</div>
Red text and a red underline? There's some simple CSS for this.
<span style='color:red; border-bottom: 1px solid red;'>DDOS</span>
<span style='color:#999; border-bottom: 1px solid #999;'>Protection</span>
Well, assuming that you want to use a single class, and without seeing your exact markup, this will work:
<div class="message">
<span>DDOS</span>
<span>Protection</span>
</div>
And then your CSS could look like this:
.message span {
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
color: #ccc;
}
.message span:first-child {
border-bottom-color: red;
color: red;
margin-right: 10px;
}
Here's a jsFiddle demo.
You can also try to play with :before and :after:
.line {
background-color: #DDD;
padding: 5px 10px;
position: relative;
}
.line:before, .line:after {
content: '';
width: 10%;
height: 2px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
.line:after {
width: 90%;
background-color: green;
left: 10%;
}
http://jsfiddle.net/DHDuw/
Ok I've made a similar one but that was asked for vertical, but now am changing the gradient direction so that it will help you
Demo (Works On Chrome, If Anyone Knows Cross-Browser, Please Feel Free To Edit, Because Am Using Old Browsers So Won't Be Able To Test)
CSS
div {
font: 40px Arial;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0505), color-stop(50%,#ff0000), color-stop(50%,#000000), color-stop(100%,#000000));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}