Can you please take a look at This Demo and let me know how to style the <hr> to look like following image:
I tried this:
hr {
border-top: 3px solid red;
border-bottom: 3px solid blue;
}
but it seems I need to use ::after Pseudo-element. Thanks
You can do it using :before :pseudo element:
hr:before {
content: "";
width: 40px;
height: 3px;
background-color: #F8CC05;
position: absolute;
top: -4px;
left: -1px;
}
hr {
position: relative;
color: #DDDDDD;
}
<hr />
Something like this.
hr:before {
content: "";
position: absolute;
top: 5px;
left: 8px;
border-bottom: 4px solid #F7C51E;
width: 40px;
}
Related
I need to draw an arrow, preferably using pseudo (:after or :before) elements. it is supposed to look like this:
But it looks like this:
This is my code:
HTML:
<div class="info">
<p>Learn about our technology<span class="arrow-right"></p></span></div>
CSS:
.arrow-right:after{
content: "";
display:inline-block!important;
width:0;
height:0;
border-left:14px solid #C8A962;
border-top:14px solid transparent;
border-bottom: 14px solid transparent;
}
Well of course it looks like that because you use a code just for the triangle part of the arrow.
You need to add the other part also. You can do that with the other pseudo-element before.
You can change and adjust 'width' 'height' 'color' and so on.
.arrow-right:after {
content: "";
display: inline-block !important;
width: 0;
height: 0;
border-left: 8px solid #C8A962;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
vertical-align: middle;
}
.arrow-right:before {
width: 20px;
height: 2px;
background: #C8A962;
content: "";
display: inline-block;
vertical-align: middle;
}
<div class="info"><a href="http://www.bay42.io" class="arrow1">
Learn about our technology<span class="arrow-right"></span>
</a></div>
You can try using arrow html code → for this purpose
<div class="info">
<p>Learn about our technology<span>→</span><p></p></div>
Looks like my comment got lost
You can use the character → . See : https://dev.w3.org/html5/html-author/charref you'll find the character entities that you need. for a pseudo, use content:"\2192"; + font-size to scale it
.arrow1::after {
content: '\2192';
/* little make up */
font-size: 2em;
/* whatever needed*/
padding: 0 0.5em;
/* whatever needed*/
vertical-align: -0.1em;
/* whatever needed*/
}
a {
text-decoration: none;
float:left;
clear:both
}
.arrow1:nth-child(2)::after {
content: '\21fe';
display:inline-block;
transform:scale(2,1);
}
.arrow1:nth-child(3)::after {
content: '\21d2';
display:inline-block;
transform:scale(2,0.8);
}
Learn about our technology
Another one stretched
or that one can be used and stretched too
p {
position: relative;
width: max-content;
}
.arrow-right:after {
top: 50%;
right: -50px;
position: absolute;
content: "";
display: inline-block !important;
width: 0;
height: 0;
border-left: 14px solid black;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
transform: translateY(-50%) scale(0.4);
}
.arrow-right:before {
content: "";
width: 25px;
height: 1px;
background: black;
position: absolute;
top: 50%;
right: -40px;
transform: translateY(-50%);
}
Try this. Change the colour to white.
I have taken a tooltip from another Stack Overflow post, and slightly modified it. It looks like this:
Generated from the following code:
.up-arrow {
display: inline-block;
position: relative;
border: 1px solid black;
text-decoration: none;
border-radius: 2px;
padding: 20px;
margin-top: 50px;
}
.up-arrow:before {
content: '';
display: block;
position: absolute;
left: 140px;
bottom: 100%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.up-arrow:after {
content: '';
display: block;
position: absolute;
left: 141px;
bottom: 100%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
}
<div href="#" class="up-arrow">Button with Up Arrow</div>
If you look very closely, you can see that the color of the :before element is not actually black, it is #77777.
This problem has left my coworkers and I stumped. It is consistent across browsers. Can anyone provide some insight?
.up-arrow {
display: inline-block;
position: relative;
border: 1px solid black;
text-decoration: none;
border-radius: 2px;
padding: 20px;
margin-top: 50px;
}
.up-arrow:before {
content: '';
display: block;
position: absolute;
left: 140px;
bottom: 100%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.up-arrow:after {
content: '';
display: block;
position: absolute;
left: 141px;
top: -17px;
bottom: 100%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
}
<div href="#" class="up-arrow">Button with Up Arrow</div>
Your problem is antialiasing, which is trying to make your line look smooth. You can make it true black by moving the :after element 1 pixel or so further away from the diagonals, so that the line is thicker and antialiasing only affects the outside pixels not the inner pixels, but whether this is desirable is another question. It looks slightly odd.
Said effect is achieved in the snippet above by adding top: -17px to the :after element.
I'm requesting your help with a .css hr class
I'm trying to figure out how to make a double border like this:
Here's what i did:
hr.style15 {
border-top: 4px double black;
}
hr.style15:after {
content: 'SHIPPING INFO';
display: inline-block;
position: relative;
top: -15px;
left: 40px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}
My questions are:
1) How do I get rid of the inline-block below the 2 lines? I've tried by deleting the inline-block sentence but it doesn't work.
2) Can I add font-family and font size to this?
3) Is it possible to increase the space between the 2 lines without increasing the width?
Basically I believe I'd do it differently. Using both :after and :before for the lines will help you drastically on putting a text on top of it.
So I prepared this CodePen for you. Basically what I did was using an :after and a :before (as I told you before) for the border-lines and after that I added a span with a background-color (in this case white) on top of the border-lines (look at the z-index).
.container {
width: 800px;
position: relative;
}
.double-bar {
&:after {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 9px;
left: 0;
z-index: 1;
}
&:before {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 13px;
left: 0;
z-index: 1;
}
span {
z-index: 2;
position: relative;
background-color: white;
left: 40px;
padding: 0 7.5px;
text-transform: uppercase;
font-weight: 600;
font-size: 20px;
}
}
You can see a demo of this.
I hope this helps!
Please have a check with this:-
HTML
<h1 class="title"><span>Shipping info</span></h1>
CSS
h1.title {
margin-top: 0;
position: relative;
}
h1.title:before {
content: "";
display: block;
border-top: solid 1px black;
width: 100%;
height: 2px;
position: absolute;
top: 50%;
z-index: 1;
border-bottom: 1px solid #000;
}
h1.title span {
background: #fff;
padding: 0 20px;
position: relative;
z-index: 5;
margin-left: 50px;
}
I had applied css to this thing but is there any way where i can do css of this type ?
means decreasing the bottom of the border line?
See if this help.
p {
position: relative;
z-index: 1;
width: 30px;
background: red;
padding: 10px;
color: #fff;
}
p:before {
content: "";
position: absolute;
left: 5px;
bottom: 0;
width: 80%;
border-bottom: 4px solid black;
height: 1px;
}
<p>
hello
</p>
I generated a bubble chat thingy from http://www.ilikepixels.co.uk/drop/bubbler/
In my page I put a number inside of it
.bubble {
position: relative;
width: 20px;
height: 15px;
padding: 0;
background: #FFF;
border: 1px solid #000;
border-radius: 5px;
}
.bubble:after {
content: "";
position: absolute;
top: 4px;
left: -4px;
border-style: solid;
border-width: 3px 4px 3px 0;
border-color: transparent #FFF;
display: block;
width: 0;
z-index: 1;
}
.bubble:before {
content: "";
position: absolute;
top: 4px;
left: -5px;
border-style: solid;
border-width: 3px 4px 3px 0;
border-color: transparent #000;
display: block;
width: 0;
z-index: 0;
}
I want the background-color of the bubble to change according to the number inside of it via rgb
so if my div is
<div class="bubble" style="background-color: rgb(100,255,255);"> 100 </div>
I want the color to be rgb(100,255,255)
The thing is this doesn't affect the triangle.
How do I write the inline css so it will include the :before and :after?
You can, using CSS variables (more precisely called CSS custom properties).
Set your variable in your style attribute: style="--my-color-var: orange;"
Use the variable in your stylesheet: background-color: var(--my-color-var);
Browser compatibility
Minimal example:
div {
width: 100px;
height: 100px;
position: relative;
border: 1px solid black;
}
div:after {
background-color: var(--my-color-var);
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<div style="--my-color-var: orange;"></div>
Your example:
.bubble {
position: relative;
width: 30px;
height: 15px;
padding: 0;
background: #FFF;
border: 1px solid #000;
border-radius: 5px;
text-align: center;
background-color: var(--bubble-color);
}
.bubble:after {
content: "";
position: absolute;
top: 4px;
left: -4px;
border-style: solid;
border-width: 3px 4px 3px 0;
border-color: transparent var(--bubble-color);
display: block;
width: 0;
z-index: 1;
}
.bubble:before {
content: "";
position: absolute;
top: 4px;
left: -5px;
border-style: solid;
border-width: 3px 4px 3px 0;
border-color: transparent #000;
display: block;
width: 0;
z-index: 0;
}
<div class='bubble' style="--bubble-color: rgb(100,255,255);"> 100 </div>
You can't. With inline styles you are targeting the element directly. You can't use other selectors there.
What you can do however is define different classes in your stylesheet that define different colours and then add the class to the element.
The key is to use background-color: inherit; on the pseudo element. See: http://jsfiddle.net/EdUmc/
If you really need it inline, for example because you are loading some user-defined colors dynamically, you can always add a <style> element right before your content.
<style>#project-slide-1:before { color: #ff0000; }</style>
<div id="project-slide-1" class="project-slide"> ... </div>
Example use case with PHP and some (wordpress inspired) dummy functions:
<style>#project-slide-<?php the_ID() ?>:before { color: <?php the_field('color') ?>; }</style>
<div id="project-slide-<?php the_ID() ?>" class="project-slide"> ... </div>
Since HTML 5.2 it is valid to place style elements inside the body, although it is still recommend to place style elements in the head.
Reference: https://www.w3.org/TR/html52/document-metadata.html#the-style-element
I resolved a similar problem by border-color: inherit
, see:
<li style="border-color: <?php echo $hex ?>;">...</li>
li {
border-width: 0;
}
li:before {
content: '';
display: inline-block;
float: none;
margin-right: 10px;
border-width: 4px;
border-style: solid;
border-color: inherit;
}