Is there any option to add css :before to .col and .form-groups?
I tried to add a new css but it just don't applying.
The mock is as follow.
CSS
.fg-steps {
position: relative;
}
.fg-steps:before {
background: black;
width: 30px;
height: 30px;
position: absolute !important;
top: 0;
left: -10px;
}
HTML
<div id="fg_parentStatus" class="form-group fg-steps">
:before and :after rules requires content property.
':before' and ':after' do not work without content property.
change your code to
.fg-steps {
position: relative;
}
.fg-steps:before {
content: '';
background: black;
width: 30px;
height: 30px;
position: absolute !important;
top: 0;
left: -10px;
}
Related
The UI View has an accordion, where I need to show some connector representation within an accordion and its children and I'm trying to achieve that using an ::before pseudo-selector for the container inside the parent accordion which has all the children accordions. The left vertical line needs to be stopped at the last intersection of the circle and the horizontal line. In the second sample image, the number of children inside the table is also unknown, I also tried placing the before element using a bottom property.
Any help I could achieve that?
& {
position: relative;
margin-left: 2rem;
padding: 0;
}
&::before {
content: '';
position: absolute;
top: 0;
background: #003d76;
left: 0;
height: 100%;
width: 1px;
display: block;
}
I have achieved this challenge, I have tried to follow the method suggested by #CBroe but there are some unavoidable dependencies that I couldn't change. Tried to make use of an ::after selector and hide the extra vertical line of the last-child with a white square.
.subAccordion {
& {
position: relative;
margin-left: 2rem;
padding: 0;
overflow: hidden;
}
&::before {
content: '';
position: absolute;
top: 0;
background: #003d76;
left: 2px;
height: 100%;
width: 2px;
display: block;
}
&:last-child::after {
content: '';
display: block;
position: absolute;
background: white;
width: 4%;
height: 100%;
top: 51px;
left: -5px;
}
}
I am trying to achieve something like this:
I tried to use the pseudo-element :after like this:
.drink {
background-color: $drink-bg;
max-width: 50%;
position: relative;
&:after {
position: absolute;
top: -10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px solid black;
}
img {
max-width: 100%;
}
}
It doesn't seem to work. Do I have to use 2 elements to achieve this? Or I can use just 1 element?
Because the image is responsive, the border should "follow" the width and height of the image element.
Your pseudo-element is actually styled correctly, and you are one small step away to get it to work: you just need to declare content: '' on it. Without a defined content property, the pseudo-element will not be rendered. This is because:
On elements, content always computes to normal. On ::before and ::after, if normal is specified, computes to none.
By extension of logic, an element without any content will not be rendered.
.drink {
background-color: $drink-bg;
max-width: 50%;
position: relative;
}
.drink:after {
content: ''; /* Added this rule */
position: absolute;
top: -10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px solid black;
}
.drink img {
max-width: 100%;
}
<div class="drink">
<img src="http://via.placeholder.com/300x500" />
</div>
I have text that needs to be underlined only under the middle part of the word.
I have created the fiddle and I want the underline should be centered as shown in this image.
The CSS code which I have included in the fiddle are:
.footer p
{
width: 50%;
border-bottom: 1px solid #f51c40;
}
You can use an absolutely positioned pseudo element with left: 50%; transform: translate(-50%); to automatically center it horizontally relative to the content.
.footer p {
display: inline-block;
position: relative;
}
.footer p:after {
content: "";
height: 1px;
width: 50%;
background-color: red;
position: absolute;
bottom: -.5em;
left: 50%;
transform: translate(-50%);
}
<div class="footer">
<p>ADDITIONAL INFO</p>
</div>
you can use the ::after pseudo element. if you dont know what pseudo elemts are i recommend you learn about them here since its a very important part of CSS you will use often. the ::after pseudo element is able to add content after a certain element.
you can create a border after the p element for example:
.footer p::after {content:""; height: 1px; width: 50px; background-color: red;}
This can be done several ways and more info is needed from you...
Here is one way off the top of my head which is extremely straight forward
<div class="footer">
<p>Add<u>ition</u>al</p>
</div>
Another alternative would include using the .footer p :before and/or :after psuedo elements...
It should work like you need
footer p
{
width: 50%;
}
footer p:after {
content: '';
border-bottom: 2px #000 solid;
position: absolute;
top:40px;
left: 30px;
width:100px;
}
https://jsfiddle.net/74zgg81d/1/
The best way to do this to use the css pseudo elements ::after. Also you have to set display: inline-block and position: relative to the p element.
Please see the below snippet:
.footer p {
display: inline-block;
position: relative;
}
.footer p::after {
content: "";
width: 60px;
height: 3px;
background: black;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: -3px;
}
<div class="footer">
<p>ADDITIONAL INFO</p>
</div>
I'm attempting to add an SVG pattern to the bottom border of my DIV element. The approach i've taken is not working. Here is the code so far.. This is where I created the SVG pattern. Lastly this is i'm trying to create in CSS.
HTML
<div class="pattern">
hello
</div>
CSS
.pattern{
color:white;
width: 500px;
height: 500px;
border-image:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAP0lEQVQYV2P8////f0ZGRkYGAgCsgBjFcJMIKUaxEp9iDLfhUoxVIcjd6B7E6Vt0k/EGC7JiguEHU0xQISycASOfKAejj1tDAAAAAElFTkSuQmCC
)repeat;
}
You could perhaps use the :after pseudo element to create the same effect:
.pattern{
color:white;
width: 500px;
height: 500px;
position: relative;
top: 0;
left: 0;
}
.pattern:after{
content: "";
display: block;
height: 8px;
width: 100%;
background-image:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAP0lEQVQYV2P8////f0ZGRkYGAgCsgBjFcJMIKUaxEp9iDLfhUoxVIcjd6B7E6Vt0k/EGC7JiguEHU0xQISycASOfKAejj1tDAAAAAElFTkSuQmCC
);
position: absolute;
bottom: 0;
left: 0;
}
I'm creating a basic webpage, but for the footer there is going to be a slanted edge that will run at the bottom of the page. Where I am having issues as you are unable to add 100% on a border, as i am using bootstrap, so the page must be responsive. Is there a way to achieve this affect whilst being responsive.
div {
width:200px;
height:80px;
background: red;
top:150px;left:100px;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 40px; right: 0;
border-right: 200px solid white;
border-top: 40px solid red;
width: 20;
}
http://jsfiddle.net/2bZAW/3675/
This should work for you. Again, I've used a pseudo element in order to alter the color, but the general consensus is the same. Both the linked question and this use overflow:hidden on the parent and hence won't scroll. As for rotating, since I've used a pseudo element, this should not be an issue:
.wrap {
height: 500px;
width: 100%;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 8;
}
.wrap:after {
content: "";
position: absolute;
height: 130%;
width: 100%;
transform: skewY(-4deg);
background: tomato;
top: -50%;
z-index: -2;
left: 0;
}
.lower {
position: absolute;
bottom: 15%;
right: 0;
}
<div class="wrap">
Hello, World!
<div class="lower">Wanted text here?</div>
</div>