Mixing
Make the width of div double of its content width
Make the width of div double of its content width
For example, HTML:
January
February
March
CSS:
div{
position:absolute;
border-bottom: 1px solid black;
}
I want to add half of the original content width before and after the content, such that I have the width of each div doubled.
The effect looks like this, workaround by manually inserting inline blocks one by one:
https://jsfiddle.net/vj25udLy/13/
If I can set the width directly as 200% of its content width or some ratio else, the job seems much simpler and more flexible.
JS/jQuery solution is welcome if there is no pure CSS solution.
3 Answers
3
A trick is to use data-attribute for the content then you add it within both pseudo-element (now you have 2x the content) then you hide one and you make the other centred:
.element {
display:inline-block;
margin:20px;
border-bottom:1px solid;
}
.element:before,
.element:after {
content:attr(data-text);
}
.element:before {
visibility:hidden;
}
.element:after {
display:inline-block;
transform:translate(-50%);
}
Another idea if you simply want to achieve the border is to use a pseudo element and make its width 200% (or left:-50% and right:-50%):
left:-50%
right:-50%
body {
text-align:center;
}
.element {
display:inline-block;
margin:20px;
position:relative;
}
.element:after {
content:"";
position:absolute;
left:-50%;
right:-50%;
bottom:0;
height:1px;
background:#000;
}
January
<br>
February
<br>
March
<br>
aaaaaaaaaaaaaaaa
<br>
bb@QuentinAlbert this is nothing, I made more horrible things :p
– Temani Afif
Jun 28 at 13:19
If you can surround the content with a <span> (as you have indicated in your css), its pretty easy.
<span>
div {
position: absolute;
left: 50%;
transform: translate(-50%,0);
text-align: center;
}
div > span {
display: inline-block;
width: 200%; // as per requirement
border-bottom: 1px solid black; // making border stretch to our inner container element.
margin-left: -50%; // center the span
}
DEMO
Bit of a hacky solution but you could use before and after pseudo elements (and I have added a span)
before
after
div {
position: absolute;
}
div>span {
position: relative;
display: inline-block; /* make span as wide as content */
border-top: 1px solid black;
border-bottom: 1px solid black;
transform: translateX(50%); /* move span to right 50% of it's own width */
}
div>span:before,
div>span:after { /* create psuedo elements 50% of the width of the span */
content: '';
display: block;
width: 50%;
position: absolute;
border: 1px solid black;
top: -1px;
bottom: -1px;
}
div>span:before {
left:100%; /* push to end */
border-left:0;
}
div>span:after { /* push to start */
right:100%;
border-right:0;
}
January
February
March
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
This sounds horrible, but well it works ;)
– Quentin Albert
Jun 28 at 13:11