How can I make a dot under text using only CSS as shown in below picture?
The picture needs to be always in middle with any length of string.
Probably I need to use :before OR :after? I've tried but result was awful.
A transformed pseudo element can be used to create this:
body { text-align: center; }
.text {
display: inline-block;
vertical-align: top;
padding-bottom: 10px;
position: relative;
text-align: center;
padding: 20px 10px;
line-height: 24px;
min-width: 100px;
background: #333;
font-size: 20px;
color: #fff;
}
.text::before {
transform: translateX(-50%);
border-radius: 100%;
position: absolute;
background: blue;
bottom: 10px;
height: 8px;
content: '';
width: 8px;
left: 50%;
}
<div class="text">about</div>
.char {
display: inline-block;
position: relative;
}
.char::before {
content: '.';
display: inline-block;
position: absolute;
bottom: -0.5em;
left: 0;
text-align: center;
width: 100%;
}
After writing this question on stack i come up with idea:) Its works excatly like I want :)
Related
How can I make a dot under text using only CSS as shown in below picture?
The picture needs to be always in middle with any length of string.
Probably I need to use :before OR :after? I've tried but result was awful.
A transformed pseudo element can be used to create this:
body { text-align: center; }
.text {
display: inline-block;
vertical-align: top;
padding-bottom: 10px;
position: relative;
text-align: center;
padding: 20px 10px;
line-height: 24px;
min-width: 100px;
background: #333;
font-size: 20px;
color: #fff;
}
.text::before {
transform: translateX(-50%);
border-radius: 100%;
position: absolute;
background: blue;
bottom: 10px;
height: 8px;
content: '';
width: 8px;
left: 50%;
}
<div class="text">about</div>
.char {
display: inline-block;
position: relative;
}
.char::before {
content: '.';
display: inline-block;
position: absolute;
bottom: -0.5em;
left: 0;
text-align: center;
width: 100%;
}
After writing this question on stack i come up with idea:) Its works excatly like I want :)
How do I create a square bracket facing down with text in the middle?
I've found ways of creating a straight line through text, but I can't find any way to have the lines either side facing down.
This is just the line but I want the brackets on the sides.
div {
overflow: hidden;
text-align: center;
font-weight: 600;
}
div:before,
div:after {
background-color: #000;
content: "";
display: inline-block;
height: 4px;
position: relative;
vertical-align: middle;
width: 50%;
}
div:before {
right: 0.5em;
margin-left: -50%;
}
div:after {
left: 0.5em;
margin-right: -50%;
}
<div>Text1</div>
Try this code:
div {
text-align: center;
margin: 10px;
height: 40px;
border: 3px solid;
border-bottom-color: transparent;
position: relative;
}
span{
background-color: #fff;
position: absolute;
top: -13px;
padding: 0px 14px;
}
<div><span>text</span></div>
I'm trying to create a badge, containing a hexagon with a number in it. The badge/list-item itself would contain some info/name.
this is what I have so far:
.item {
display: block;
background-color: blue;
}
.item > span {
color: white;
display: inline-block;
}
.hexagon {
position: relative;
width: 65px;
height: 65px;
line-height: 65px;
text-align: center;
color: white;
}
.hexagon span {
position: absolute;
color: white;
z-index: 2;
left: 30;
}
.hexagon:before {
color: #ef473a;
position: absolute;
content: "\2B22";
font-size: 65px;
z-index: 1;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
<div class="item">
<div class="hexagon"><span>1</span></div>
<span class="title">TEST test</span> <!-- maximum width? > new line -->
<span class="info">something darkside</span>
</div>
This is what I'm trying to achieve:
As you can see, the "blue" background should only start at the tip of the hexagon. Width and height of it, aren't going to change. So now I'm wondering whether it would be easier to use an image or if someone could help me recreate the image, would be fine too :)
Thanks in advance!
Try the flexbox way, it's made for your case since you have three items (medal, title, description) that you want to have vertically aligned in the middle next to each other.
Below is a starting point, you can probably extend that to your needs by yourself.
Please note that I also changed the way the hexagon is created, it's not using an UTF8 character now but simply colored borders. This gives you more control about the size of the actual hexagon shaped medal.
Standing on one of its tips, the height of this hexagon is equivalent with its diameter (d) which in turn is twice as long as one of the six lines (s) forming the hexagon. The width (w) of this hexagon is then: s * sqrt(3) or .5 * d * sqrt(3).
.badge {
height: 64px;
margin-left: 35px;
color: white;
font-family: sans-serif;
background: blue;
border: 1px solid transparent;
display: flex;
align-item: middle;
}
.medal {
position: relative;
margin-left: -30px;
min-width: 75px;
}
.count {
position: absolute;
width: 58px;
text-align: center;
line-height: 64px;
font-size: 30px;
top: -16.74px;
}
h3 {
max-width: 40%;
margin-right: 30px;
font-size: 14px;
}
p {
font-size: .875em;
}
.hexagon {
position: relative;
width: 58px;
height: 33.49px;
background-color: #ff2600;
margin: 14.74px 0 16.74px 0;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 16.74px solid #ff2600;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 16.74px solid #ff2600;
}
<div class="badge">
<div class="medal">
<div class="hexagon">
<div class="count">1</div>
</div>
</div>
<h3>The HEXAGON Badge Quest</h3>
<p>You successfully posted a valid question on Stack Overflow and received an answer.</p>
</div>
Try the following. I haven't tested on mobile. Just chrome at this point, but it should get you close. You'll need to play around with the text somewhat to handle the wrapping and sizing inside the blue bar, but your question was in regards to the badge. The corner effects are clipping the shape by about 10px. So setting a fixed height on the bar and a 10px taller height on the hexagon did the trick. Then just some positioning and margin to move things into position. Good luck.
.item {
display: block;
background-color: blue;
height: 66px;
position: relative;
left: 35px;
width: 100%;
}
.item > span {
color: white;
display: inline-block;
}
.hexagon {
display: inline-block;
position: relative;
width: 66px;
height: 66px;
line-height: 66px;
text-align: center;
color: white;
top: 0;
left: -35px;
}
.hexagon span {
position: absolute;
color: white;
z-index: 2;
width: 66px;
height: 66px;
line-height: 66px;
text-align:center;
left: -0;
}
.hexagon:before {
color: #ef473a;
position: absolute;
content: "\2B22";
font-size: 76px;
z-index: 1;
width: 66px;
height: 66px;
left: 0;
top: -5px;
}
.title {
position: absolute;
font-size: 1.75rem;
top: 12px;
left: 33px;
margin: 0;
text-align:center;
display:block;
height: 66px;
width: 20%;
line-height: 18px;
}
.info {
position: absolute;
top: 0px;
left: 20%;
margin: 0;
text-align:center;
display:block;
height: 66px;
width: 70%;
line-height: 66px;
vertical-align: center;
}
<div class="item">
<div class="hexagon"><span>1</span></div>
<span class="title">TEST test</span> <!-- maximum width? > new line -->
<span class="info">something darkside</span>
</div>
I am trying to achieve the following, with pure CSS and no images:
As you can see, its a heading with a line afterwards. The problem is, that the line should has 2 different colors and more important, 2 different heights.
The first parts color is orange, has a height of 3px and a fixed width of 100px (padding-left: 15px)
The sedond parts color is #E1E1E1 and should fill the rest of the line.
My first try was this:
<h1><span>OUR ARTICLES</span></h1>
<style>
h1 {
overflow: hidden;
}
h1 span {
display: inline-block;
position: relative;
}
h1 span:after {
content: "";
position: absolute;
height: 1px;
top: 45%;
width: 999px;
background: #E1E1E1;
border-left: 100px solid orange;
left: 100%;
margin-left: 15px;
}
</style>
See http://jsfiddle.net/oyxmxoLs/
But as you can see, I can't make the orange part thicker than the grey one.
Any ideas?
Another way: Flexbox
With display: flex you don't have to give the line a certain width and you can make sure it is always responsive.
We are going here with an progressive enhancement approach. We'll make a cut after IE8 by using ::before instead of :before. In IE9 only the grey line will be shown (underneath the title).
h1 {
align-items: center;
color: #444;
display: flex;
font: 18px/1.3 sans-serif;
margin: 18px 15px;
white-space: nowrap;
}
h1::before {
background-color: orange;
content: "";
height: 4px;
margin-left: 10px;
order: 2;
width: 100px;
}
h1::after {
background-color: #E1E1E1;
content: "";
display: block;
height: 2px;
order: 3;
width: 100%;
}
<h1>Our articles</h1>
Do not forget to add vendor-prefixes!
You can solve this by using :before and :after
http://jsfiddle.net/oyxmxoLs/1/
h1 {
overflow: hidden;
}
h1 span {
display: inline-block;
position: relative;
}
h1 span:before {
content: "";
position: absolute;
height: 1px;
top: 45%;
width: 999px;
background: #E1E1E1;
left: 100%;
margin-left: 15px;
}
h1 span:after {
content: "";
position: absolute;
height: 3px;
top: 45%;
width: 100px;
background: orange;
left: 100%;
margin-left: 15px;
margin-top:-1px;
}
<h1><span>OUR ARTICLES</span></h1>
You can also use the :before pseudo-element to add the orange line.
h1 {
overflow: hidden;
}
h1 span {
display: inline-block;
position: relative;
}
h1 span:after, h1 span:before {
content: "";
position: absolute;
height: 1px;
left: 100%;
top: 45%;
margin-left: 15px;
}
h1 span:after {
width: 999px;
background: #E1E1E1;
}
h1 span:before {
height: 3px;
z-index: 1;
margin-top: -1px;
border-radius: 2px;
width: 100px;
background: orange;
}
<h1><span>OUR ARTICLES</span></h1>
I need to create a separator with text in the middle. By middle I mean both centered horizontally and vertically - there are many examples of this technique using pseudo elements or an extra span in the middle.
Here's some code I would normally use - uses the span method:
h2.centre-line
{
width:40%;
text-align:center;
border-bottom:0.1rem solid #ccc;
line-height:0.1em;
margin:2.5rem 30%;
}
h2.centre-line span
{
background-color:#fff;
padding:0 1rem;
}
<h2 class="centre-line"><span>Text</span></h2>
The problem I have with all of the examples I have found so far is that the text is on a transparent background with margin spacing around it. However what I want to do is place the text in a container with height and keep it centered, like this:
At the moment I've been unable to adapt my code sucessfully and not come across any further suitable examples to follow.
Any ideas?
Your request is a little unclear as it's not stated what this 'separator' is supposed to be separating.
However, vertical & horizontal centering can be achieved by using absolute positioning.
The 'line behind' is achieved by a pseduo-element.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wrap {
height: 200px;
position: relative;
background: lightgrey;
margin: 5px;
}
h2.centre-line {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
width: 40%;
transform: translate(-50%, -50%);
}
h2.centre-line:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
top: 50%;
left: 0;
z-index: -1;
background: red;
}
h2.centre-line span {
background-color: lightblue;
padding: 1rem;
display: inline-block;
}
<div class="wrap">
<h2 class="centre-line"><span>Text</span></h2>
</div>
JSfiddle Demo with another wrapper with greater height.
Use an hr? something like this: http://liveweave.com/42IlZQ
hr {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr:after {
content: "ยง";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}
<div class="container">
<hr class="hr-text" data-content="AND">
</div>
<style type="text/css">
.container {
max-width: 50%;
margin: 40px auto;
}
.hr-text {
line-height: 1em;
position: relative;
outline: 0;
border: 0;
color: black;
text-align: center;
height: 1.5em;
opacity: .5;
}
.hr-text:before {
content: '';
background: linear-gradient(to right, transparent, #818078, transparent);
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
}
.hr-text:after {
content: attr(data-content);
position: relative;
display: inline-block;
color: black;
padding: 0 .5em;
line-height: 1.5em;
color: #818078;
background-color: #fcfcfa;`enter code here`
}
</style>`enter code here`