This question already has answers here:
Border line next to text
(5 answers)
Closed 7 years ago.
How can I achieve the text and right border line with pure CSS? Check below sample image.
The body has a background image. I have made the line using ::after, but I can't dynamically calculate the gap between text and border line from the left. I can set a fixed width for the gap if the text is static. But how can I do it when the text is dynamic?
body,
html{
height: 100%;
}
body{
background-image: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/7-flower-wallpaper.jpg);
}
h1{
font-size: 30px;
text-transform: uppercase;
color: #fff;
position: relative;
}
h1::after{
position: absolute;
content: '';
width: 80%;
left: 160px;
bottom: 5px;
background-color: #fff;
height: 1px;
}
<h1>About us</h1>
Try using flexbox. Set he h1 to display:flex, it turns the text "About us" and the ::after pseudo element to flex items, with flex:1 on the 2nd one for taking the max remaining width available. Lastly, adjust the position as needed.
body, html {
height: 100%;
}
body {
background-image: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/7-flower-wallpaper.jpg);
}
h1 {
font-size: 30px;
text-transform: uppercase;
color: #fff;
display: flex;
}
h1::after {
flex: 1;
content: '';
border-bottom: 1px solid #fff;
position: relative;
left: 6px;
top: -6px;
}
<h1>About us</h1>
I get the solution, check below snippet
body,
html{
height: 100%;
}
body{
background-image: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/7-flower-wallpaper.jpg);
}
h1{
font-size: 30px;
text-transform: uppercase;
color: #fff;
position: relative;
overflow: hidden;
}
h1::after{
position: absolute;
content: '';
bottom: 5px;
width: 100%;
background-color: #fff;
height: 1px;
display: inline-block;
margin-left: 10px;
}
<h1>About us</h1>
Related
I'm having trouble with a SCSS/CSS styling idea, I want to fill the space before or after the last line of a heading with a solid line. The last line of text does not have a set width (it varies depending on screen size) I'm open to any suggestions.
Here's what I want to achieve when the text is aligned right or left.
|Here is some text on screen| |Here is some text on screen|
|very cool -----------------| or |----------------- very cool|
| | | |
| | | |
EDIT Code added for clarity:
HTML
<h1>You're the painter, we just want to see you paint.</h1>
CSS (that is how far I've got)
h1{
font-family: "doesntMatter";
font-style: bold;
font-size: 2rem;
text-align: left;
}
h1::after{
display: inline-block;
line-height: 0;
position: relative;
bottom: 2.5rem;
border-bottom: 10px solid red;
width: 100%;
content: "";
}
I found a solution to my problem, if you take this code here and run it, the last line will be struck through.
.container {
width: 100%;
padding-inline: 2rem;
}
.text {
font-style: bold;
font-size: 2.5rem;
line-height: 2.5rem;
position: relative;
overflow-x:hidden;
}
.text::after {
position: absolute;
left:0;
bottom: 0.9rem;
width: 100%;
border-bottom: 0.4rem solid #000;
content: "";
}
<section class="container">
<h1 class="text">You're the painter, we are just the paint, brushes and canvas</h1>
</section>
But if you remove left:0; from the text::after styling, it magically jumps over to fill the blank space at the end.
I added a margin-left: 1rem to give the things some breathing room but yea I really don't know what's going on.
I don't know how it works but it just kind of does, if the .text{} element has overflow-x: hidden applied to it then the effect will cutoff at the width of the header.
.container {
width: 100%;
padding-inline: 2rem;
}
.text {
font-style: bold;
font-size: 2.5rem;
line-height: 2.5rem;
position: relative;
overflow-x: hidden;
}
.text::after {
position: absolute;
bottom: 0.9rem;
width: 100%;
margin-left: 1rem;
border-bottom: 0.4rem solid #000;
content: "";
}
<section class="container">
<h1 class="text">You're the painter, we are just the paint, brushes and canvas</h1>
</section>
That is one way to do the effect, if you want the line to spill off the page, you apply overflow-x: hidden to the .container{} element and remove if from the .text{}... since my container is 100% width the line goes off the page and works as intended.
.container {
width: 100%;
padding-inline: 2rem;
overflow-x: hidden;
}
.text {
font-style: bold;
font-size: 2.5rem;
line-height: 2.5rem;
position: relative;
}
.text::after {
position: absolute;
bottom: 0.9rem;
width: 100%;
margin-left: 1rem;
border-bottom: 0.4rem solid #000;
content: "";
}
<section class="container">
<h1 class="text">You're the painter, we are just the paint, brushes and canvas</h1>
</section>
The line responds to any changes in the width of the last line. There's a few edge cases that I'm going to have to look into like if the last line of text practically fills the entire width of the header, then there's just a little nub at the end.
But it's been fixed! I hope this helps anyone in the future that couldn't figure out the right combination of words to google to find a solution.
Building on what you have already, this snippet puts the text within a span element. This enables a white padding which can overwrite that part of the red line which is under the actual text.
h1 {
font-family: "doesntMatter";
font-style: bold;
font-size: 2rem;
text-align: left;
position: relative;
}
h1>span::after {
display: inline-block;
position: absolute;
border-bottom: 10px solid red;
width: 100%;
left: 0;
margin-top: -11px;
content: "X";
color: transparent;
z-index: -1;
}
h1>span {
background: white;
padding-bottom: 11px;
}
<h1><span>You're the painter, we just want to see you paint.</span></h1>
Note - it's a little bit hacky, including positioning 1px different from the height of the line. This is because on modern screens which use more than one screen pixel for a CSS pixel the system can 'leave behind' traces of color when it is positioning (e.g. a screen pixel - not a whole CSS pixel).
I'm looking for the HTML code to create a short horizontal line centered inline with text (in a particular typeface) like the image.
Currently, the code I have is:
<span style="font-family:'Taner Ardali Antikor Mono Medium';">MY MISSION</span>
Note: I'm using this code for a text markdown or code block on my Squarespace site. I'm unfamiliar with coding, so not sure if that makes a difference.
You can use :after selector for this
.title {
font-family:'Taner Ardali Antikor Mono Medium';
font-size: 30px;
display: block;
}
.title:after {
content:"";
display: inline-block;
height: 2px;
width: 100px;
margin-left: 10px;
background: #111;
vertical-align: super;
}
<span class="title">MY MISSION</span>
Or It is possible to change HTML use heading tag like this:
.title {
font-family:'Taner Ardali Antikor Mono Medium';
font-size: 30px;
display: block;
position: relative;
}
.title span {
background: #fff;
position: relative;
z-index: 1;
padding-right: 20px;
}
.title:after {
content:"";
display: inline-block;
height: 2px;
width: 100%;
margin-left: 10px;
background: #111;
position: absolute;
left: 0;
top: 15px;
}
<h2 class="title"><span>MY MISSION</span></h2>
This question already has answers here:
Create line after text with css
(8 answers)
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 1 year ago.
I am trying to get a line through the a tag for decorative effect. The line should span the entire width but not go through content of the tag itself.
This is what I want,
This is what I've got so far.
a {
background: none;
}
a::after {
content: "";
border: 3px solid #000;
display: block;
position: relative;
top: -50%;
}
<a class="fw-bold" href="">Explore Services</a>
And here is the jsfiddle of the above code https://jsfiddle.net/68fkvhcw/
Why is the position relative with negative top margin not working?
This would be a possible way to do that. Wrap the a tag all around the elements, make that a flex container and use settings similar to those of my snippet below:
html,
body {
margin: 0;
}
a.link1:link,
a.link1:visited {
text-decoration: none;
font-size: 24px;
color: green;
}
.link1 {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
background: #dfd;
padding: 6px 10px;
}
.text1 {
flex-grow: 0;
display: inline-block;
}
.line {
height: 2px;
background: #fa0;
flex-grow: 1;
margin: 0 20px 0;
}
<a class="link1" href="#">
<div class="text1">Explore all Services</div>
<div class="line"></div>
</a>
I have created a code snippet as you want. But here is a suggestion that doesn't use styles directly on <a> tag else it will affect all your <a> tags on the page. So I have defined a style here .my_underline
You can adjust the thickness of the line and the color of the font.
.my_underline {
overflow: hidden;
text-decoration: none;
font-size: 2rem;
font-weight: bold;
color:aqua;
}
.my_underline:after {
content:"";
display: inline-block;
height: 0.5em;
vertical-align: bottom;
width: 100%;
margin-right: -100%;
margin-left: 10px;
border-top: 1px solid black;
}
<a class="fw-bold my_underline" href="">Explore all Services</a>
Use theses styles ,
a {
color: #000000;
font-family: 'collegeregular';
font-size: 20px;
margin-left: 5px;
position: relative;
width: 93%;
}
a::after {
position: absolute;
content: "";
height: 2px;
background-color: #242424;
width: 50%;
margin-left: 15px;
top: 50%;
}
<a class="fw-bold" href="">Explore Services</a>
This question already has answers here:
Text in Border CSS HTML
(10 answers)
Closed 2 years ago.
See the image above. I'd like to have the text on top of the border. How can I achieve this using html/css? Are there other alternatives
.wrapper {
width: 100%;
background: black;
border: 4px solid purple;
padding: 1rem;
color: #FFF;
}
.wrapper p {
text-align: center;
}
h1 {
text-align: center;
}
a {
display: table;
margin: 0 auto;
color: #FFF;
}
<div class="wrapper">
<h1>
Lorem ipsum dolor sit amet
</h1>
<p>
Lorem ipsum
</p>
Button
</div>
You can achieve this using the pseudo elements of the h1 tag. In short, you have a wrapper div that creates the border left, right and bottom and still then use the pseudo elements of h1 to make the top border.
.wrapper {
height: 100px;
margin: 0 auto;
width: 80%;
margin-top: 30px;
box-sizing: border-box;
border: 5px solid tomato;
border-top: none;
position: relative;
}
.wrapper h1 {
position: absolute;
top: -41px;
display: block;
text-align: center;
width: 100%;
overflow: hidden;
font-size: 2em;
}
h1:before,
h1:after {
content: "";
display: inline-block;
width: 50%;
margin-right:1em;
margin-left:-50%;
vertical-align: middle;
border-bottom: 5px solid tomato;
}
h1:after {
margin-right:-50%;
margin-left:1em;
}
/*Demo Only*/
body{
background:url("https://i.imgur.com/fL3tbdj_d.webp?maxwidth=728&fidelity=grand") no-repeat;
background-size:100% 100%;
<div class="wrapper">
<h1>
TITLE HERE
</h1>
</div>
<div class="wrapper">
<h1>
LONGER TITLE HERE
</h1>
</div>
You can try to change the position of your h1 to relative, and move It
.wrapper p {
position : relative;
bottom : 30%;
}
the bottom one means that It will move 30% to the top
Here is simple example may be it can give you an idea I found hard to edit your own codes so that's why I made this simple code
body {
background-color: lightgreen;
}
.cont {
height: 120px;
width: 400px;
border: 2px solid black;
position: relative;
margin: 40px
}
.cont:before {
content: "My Header title";
width: 180px;
/* border: 1px solid; */
position: absolute;
text-align: center;
top: -10px;
background-color: lightgreen;
left: 50%;
transform: translateX(-50%);
}
<div class="cont"></div>
I'm trying to emulate this effect via CSS:
The reason this is an issue is because it needs to be re-usable. The red underline's size should be dictated by the text length, but also overflow its container in a predictable manner, e.g.:
<div>
<h1>This</h1>
<h1>Cool</h1>
<h1>Effect</h1>
</div>
The red underline should extend outside the div by 10px on the left, and then also overflow the text itself by roughly 50px on the right. So, all told, the red line is +60 pixels wider than the text itself.
How can I achieve this effect without doing it manually each time? I've had no success with pseudo elements, and box-shadow won't extend on the left and right as I need it to.
Pseudo elements was the answer for me. Setting z-index on the :after element to get it positioned behind the parent element is a neat trick. The elements can't be block elements, but other than that it seemed straightforward.
html {
min-height: 100%;
}
body {
min-height: 100%;
background: linear-gradient(to bottom, #0b122f 0%, #17457d 100%);
padding: 20px;
}
h1 {
position: relative;
display: inline-block;
color: #fff;
font-family: sans-serif;
font-size: 100px;
font-weight: 300;
margin: 0;
}
h1:before {
content: "";
background: red;
height: .25em;
width: calc( 100% + 60px);
position: absolute;
bottom: .15em;
left: -10px;
z-index: -1;
}
<div>
<h1>This</h1>
<br />
<h1>Cool</h1>
<br />
<h1>Effect</h1>
</div>
use <h1><span>This</span></h1> make effect in span and adjust red box to use padding to were's you want :
h1 span {
position: relative;
font-size: 100px;
font-weight: 300;
margin: 0;
padding:0 0 0 20px;
}
h1 span::before {
content: "";
background: red;
height: .25em;
position: absolute;
bottom: .15em;
z-index: -1;
width: 100%;
left: 0;
}
like: https://jsfiddle.net/bdmpqkme/1/
All this examples mentioned above by lalit bhakuni and JasonB work really well, but only when you don't have any section with a background behind this underlined text.
The z-index: -1 will put the line you want behind the text like you want and also behind any other parent sections. In case any of these parent sections have a background, the line will be hidden (behind).
Other solution, not so clean, but solves all our problems is by adding an extra element inside of your heading:
HTML
<div class="div-with-background">
<h1><span>This</span></h1>
<br />
<h1><span>Cool</span></h1>
<br />
<h1><span>Effect</span></h1>
</div>
CSS
.div-with-background {
background-color: #333;
}
h1 {
position: relative;
display: inline-block;
color: #fff;
font-family: sans-serif;
font-size: 100px;
font-weight: 300;
margin: 0;
}
h1::before {
content: "";
background: red;
height: .25em;
width: calc( 100% + 60px);
position: absolute;
bottom: .15em;
left: -10px;
}
h1 > span {
position: relative;
}
In this case, we don't even need to use the z-index property.