So I've got this css here:
.outerDot {
width: 50px;
height: 50px;
background: white;
border: 4px solid blue;
border-radius: 50px;
}
.outerDot:after {
background: blue;
width: 20px;
height: 20px;
}
And I want the .outerDot:after to show up inside the .outerDot. Am I barking up the wrong tree? JsFiddle
The html is just <div class="outerDot"></div>.
You have to add a content attribute, and make it display block:
.outerDot:after {
content: '';
display: block;
background: blue;
width: 20px;
height: 20px;
}
Here's your fiddle: http://jsfiddle.net/hV93X/2/
Related
how with the filter css property pop-up in this element to leave the background white?
need to leave the inner white when fillter , and I don't know how
now
need
.first{
width: 200px;
height: 50px;
border: solid;
background: white;
}
.first span{
display: none;
background: white;
}
.first:hover{
filter: brightness(55%);
}
.first span:hover{
width: 100px;
height: 25px;
border: solid;
display: block;
}
<div class="first"> <span>alert</span></div>
<div class="first"><span>alert</span></div>
you can use this style
.first{
width: 200px;
height: 50px;
border: solid;
background: white;
}
.first span{
display: none;
background: white;
}
.first:hover{
background: #0000004f;
}
.first:hover span{
width: 100px;
height: 25px;
border: solid;
display: block;
}
Whenever you use filter, all children of that element will inherit it.
To achieve what you want you need to make it a sibling. Here is an example:
HTML:
<div class="block">
<div class="block-filter"></div>
<span class="block-message">alert</span>
</div>
CSS:
.block {
position: relative;
width: 200px;
}
.block-filter {
height: 50px;
width: 100%;
border: solid;
background: white;
}
.block-message {
display: none;
background: white;
}
.block-filter:hover {
filter: brightness(55%);
}
.block-filter:hover + span {
filter: unset;
position: absolute;
top: 0;
left: 0;
border: solid;
display: block;
pointer-events: none;
background: white;
}
https://codepen.io/diego-fortes/pen/vYBJoeP
So I have been a developer and pretty proficient at CSS and coding styling. There is a new design that has been approved and trying to figure out the best way to accomplish this. Here is a screenshot of what I am trying to achieve with drawing borders and lines but they need to extend both left and down:
https://cdn2.hubspot.net/hubfs/2323601/Epsilon_April2017/Images/Screen%20Shot%202017-05-02%20at%209.19.29%20AM.png
Does anyone have any insights on how to achieve this with HTML/CSS? Obviously going to tablet and mobile it would be removed, but on desktop they want to achieve this. I do not want to do a flattened image, but that is the only way I am leaning right now.
I have tried creating the lines as an image which i am placing below the left text
Is only playing with CSS
body{
background: black;
margin: 0;
}
.div{
position: relative;
width: 80%;
background: grey;
display: table;
margin-top: 50px;
}
.a,
.b{
display: table-cell;
color: white;
}
.a{
text-align: right;
font-size: 1.2em;
padding: 15px;
border-bottom: 2px solid white;
}
.b{
width: 140px;
}
.b div{
position: absolute;
background: pink;
font-size: 1em;
bottom: 0;
border: 2px solid white;
padding: 8px;
}
strong{
display: block;
width: 150px;
float: right;
}
.b div:before{
content: "";
display: block;
position: absolute;
width: 2px;
height: 50px;
background: white;
top: 100%;
left: -2px;
}
<div class="div">
<div class="a">OUR INDUSTRY-LEADING <br><STRONG>EXPERTS ARE READY TO</STRONG></div>
<div class="b"><div>GROW YOUR BUSSINES</div></div>
</div>
There must be something that I am missing, but I am trying to use ::after in my css, but unfortunately it isn't working.
My css code is below.
.test {
height: 40px;
width: 40px;
background: #444;
}
.test::after {
position: relative;
top: 15px;
height: 240px;
width: 240px;
background: red;
}
<div class="test"></div>
You just need add content: '' to pseudo-class :after or :before and set the position to absolute.
.test {
height: 40px;
width: 40px;
background: #444;
position:relative;
}
.test:after {
position: absolute;
top: 15px;
height: 240px;
width: 240px;
background: red;
content: ''
}
<div class="test"></div>
but if you want you can use it without absolute, just add some float to it, because pseudo-classes generates like inside the parent node.
.test {
height: 40px;
width: 40px;
background: #444;
position:relative;
}
.test:after {
content: '';
background: red;
width: 10px;
height: 10px;
float: right;
}
<div class="test"></div>
But if you need use it like icon, inside the block better way use it with absolute.
I have a jsfiddle here - http://jsfiddle.net/w2tbefap/
It's a simple css problem.
I have a two separate elements (div's here).
The two elements have different widths.
I need to responsively center the elements next to each other so it is positioned like in the bottom example. The bottom example is just a centered image.
.block-1{
border: 1px solid red;
height: 100px;
}
.content{
border: 1px solid green;
position: relative;
}
.block-1-1{
background: blue;
width: 100px;
height: 50px;
//float: left;
position: absolute;
right: 50%;
margin-right: 20px;
}
.block-1-2{
background: yellow;
width: 300px;
height: 50px;
//float: right;
position: absolute;
left: 50%;
//right: 0;
}
.block-2{
border: 1px solid red;
height: 100px;
}
.content-2{
text-align: center;
}
Try this CSS for the blocks, and add text-align:center; to .content:
.block-1-1 {
background: blue;
width: 100px;
height: 50px;
margin-right: 20px;
display:inline-block;
}
.block-1-2 {
background: yellow;
width: 300px;
height: 50px;
display:inline-block;
}
jsFiddle example
Do you have to use position: absolute; ?
I suggest inline-block:
http://jsfiddle.net/w2tbefap/4/
.content{
border: 1px solid green;
position: relative;
text-align: center;
}
.block-1-1, .block-1-2 {
display: inline-block;
width: 100px;
height: 50px;
}
How can I style a div to look like a comic-strip speech bubble in CSS?
Here's an image demonstrating what I mean:
Is there a way of doing this in pure CSS?
A quick example, you can tweak it to fit your needs .. and since I cannot post a fiddle without code:
HTML:
<div class="balloon">
O hai !
<span class="tip"></span>
</div>
CSS:
body { background: #000; }
.balloon {
width: 250px;
height: 75px;
padding: 50px;
background: #fff;
border-radius: 50px;
position: relative;
font-size: 34px;
text-align: center;
}
.balloon .tip {
width: 0;
height: 0;
position: absolute;
right: 70px;
bottom: -20px;
border: solid 10px;
border-color: #fff transparent transparent transparent;
}
http://jsfiddle.net/6rzDK/