CODEWITHSUNDEEP
htmlcss
Suraj
Suraj

Reputation: 2553

add before after, after a div ends

I am trying to add a seperator after my div ends. I am thinking can we use it like we can use for the navigation menus and after li or before li.

can we add like that in my case?

here's what I am trying.

    .content-wrapper .step1description p:after {

    content: '';
    position: absolute; 
    width: 100%;
    height:  5px; 
    display: inline-block;
    background-position: center;
    background-image: url(http://i.imgur.com/Wrk0SFT.png); 
    top: 0; 
}

Will this work?

Please suggest a way to add the seperator If not this way.

Upvotes: 1

Views: 90

Answers (4)

awe
awe

Reputation: 22442

You can use :before on the .step1description (your css tried to reference any p that is child of .step1description)

Also change to position:relative, and display:block. This way, the line will be placed nicely between the image and the text inside the p.

.content-wrapper .step1description:before {

    content: '';
    position: relative; 
    width: 100%;
    height:  5px; 
    display: block;
    background-position: center;
    background-image: url(http://i.imgur.com/Wrk0SFT.png); 
}

Upvotes: 0

Ishimdar Ahamad
Ishimdar Ahamad

Reputation: 202

I am not able exact what you are asking but I think you use this in your css class, Your code is working.

Css

.center-logo p.step1description::before {}

Upvotes: 2

Vipin Raunchhela
Vipin Raunchhela

Reputation: 193

I think this can help you

.content-wrapper {

	position: relative;
	overflow: hidden; 
	width: 100%;
	background-color: #333230; 
}

.content-wrapper .center-logo {

	position: relative; width: 100%;
	text-align: center;
	margin: 30px 0 15px 0;
}


.content-wrapper .center-logo img {

	display: inline-block; 
}

.content-wrapper .step1description{

	position: relative;
	color: #fff;
	bottom: 24px;
	font-size: 10px;
}

	.content-wrapper .step1description:after {

		content: '';
		position: absolute; 
		width: 100%;
		height:  3px; 
		display: inline-block;
		background-position: center;
		background-image: url(http://i.imgur.com/Wrk0SFT.png);  
       width:100%;
      bottom:0px;
      left:0;
      top:30px;
     
	}
<div class="content-wrapper">

                <div class="container">
                    
                    <div class="row">

                        <div class="col-xs-12">

                            <div class="center-logo">

                                <img src="assets/description.png" alt="">
                                <P class = "step1description"> This is Testing </p>
                                        
                            </div>
                        
                        </div>  

                    </div>
                    
                </div>     

            </div>

Upvotes: 0

Vangel Tzo
Vangel Tzo

Reputation: 9303

Actually your p tag has the .step1description class (there is no p element under .step1description), so the correct declaration should be:

.content-wrapper .step1description:after {
...
}

An example: https://jsfiddle.net/w4rmmvkc/2/

Upvotes: 2

Related Questions