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>
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 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 :)
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>
This is my code
.privacycheck1 {
position: relative;
top: 265px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 35px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
<div class="privacycheck1"></div>
I want to make it so when someone hovers over the privacycheck1, I want them to see an arrow connecting to the box pointing at privacycheck1's circle.
Is there anyway to make a class in a class?
You can use an extra span element to create this.
First create the tail of the arrow using the span and then create the arrow head using the border-hack on the after pseudo-element. You can find a wide range of arrows here
.privacycheck1 {
position: relative;
top: 30px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 30px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 30px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
.arrow {
position: absolute;
width: 15px;
height: 5px;
background: green;
left: 20px;
top: 8px;
display:none;
}
.arrow:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid green;
left:15px;
top:-2px;
display:none;
}
.privacycheck1:hover span,.privacycheck1:hover span:after{
display:block;
}
<div class="privacycheck1"><span class="arrow"></span>
</div>
You don't need an extra span. You can use an :after just like you used a :before.
.privacycheck1:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 100%;
width: 0;
height: 0;
margin-top: -15px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #CF0000;
}
If you use top: 50%; and margin-top negative half the arrow height it will always be perfectly aligned in the vertical center. In this case I gave the arrow height: 30px; so the margin-top is -15px
Oh and you made a mistake in you hover:before. 'font-weight: 100px;' doesn't exist, you can use 'bold', '700' or another value.
Another tip, add this to your hover:before
left: calc(100% + 15px);
This way your box will always have the right distance between the 'dot' and the text box. The box will use the width of the parent (the element with position: relative;) + 15px (the width of the arrow) to align from the left.
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>