Can anyone explain me what I am doing wrong in this example? I am trying to create div which has lines on both sides.
.bottom-logo {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: orange;
margin: 0 auto;
position: relative;
}
.bottom-logo::before {
content: "";
margin-right: 50px;
margin-top: 20px;
border-bottom: 4px solid black;
display: inline-block;
width: 100px;
float: right;
}
.bottom-logo::after {
content: "";
display: inline-block;
border-bottom: 4px solid black;
width: 100px;
margin-left: 50px;
}
<div class="bottom-logo"></div>
I would suggest to use absolute position for the pseudo elements. Also updated to use percentage values to make it more flexible.
.bottom-logo {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: orange;
margin: 0 auto;
position: relative;
}
.bottom-logo::before,
.bottom-logo::after {
content: "";
border-bottom: 4px solid black;
width: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.bottom-logo::before {
right: 100%;
}
.bottom-logo::after {
left: 100%;
}
<div class="bottom-logo"></div>
Or, you can add a <span> tag then use inline block with vertical align.
.bottom-logo {
text-align: center;
}
.bottom-logo span {
display: inline-block;
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 100%;
background-color: orange;
}
.bottom-logo::before,
.bottom-logo::after {
display: inline-block;
vertical-align: middle;
content: "";
border-bottom: 4px solid black;
width: 100px;
}
<div class="bottom-logo"><span></span></div>
Another way is to use flexbox with a <span> tag or so.
.bottom-logo {
display: flex;
justify-content: center;
align-items: center;
}
.bottom-logo span {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: orange;
}
.bottom-logo::before,
.bottom-logo::after {
content: "";
border-bottom: 4px solid black;
width: 100px;
}
<div class="bottom-logo"><span></span></div>
Please add float:left;
.bottom-logo::after {
content: "";
display: inline-block;
border-bottom: 4px solid black;
width:100px;
margin-left:50px;
float:left;
}
Related
I am little stuck and need ur help, actually I am stuck in a problem I need to create an self pointing arrow to a rectangular box in css which I am unable to develop it Any help with example would be appreciated.
To understand the problem better I am attaching the desired output image.
I am also sharing my code what I have tried
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
You can give the second box a pseudo element and style it using clip-path to make a little arrow:
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left-width: 0;
position: relative;
}
.container-2::after {
content: '';
display: block;
position: absolute;
background-color: black;
width: 10px;
height: 10px;
clip-path: polygon(100% 0, 80% 50%, 100% 100%, 0 50%);
bottom: 0;
left: 0;
transform: translateY(50%);
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
Perhaps this pseudo element ::after with a unicode arrow?
I additionally removed the left border
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left:0;
}
.container-2::after {
content: "⮜";
position: absolute;
top: 140px;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
Removed left border
Added pseudo element::before, could also be div with class arrow
Created triangle arrow
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left: none;
position: relative;
}
.container-2:before {
content: '';
display: block;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-right: 8px solid black;
border-bottom: 4px solid transparent;
position: absolute;
left: 0;
bottom: -4px;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
This question already has answers here:
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 3 years ago.
I have the following HTML and CSS:
body {
text-align: center;
}
div {
border: 1px solid black;
margin: 0 auto;
width: 200px;
}
p {
border: 1px solid red;
line-height: 0.5;
margin: 20px;
text-align: center;
}
span {
display: inline-block;
position: relative;
}
span:before,
span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
top: 0;
width: 100%;
}
span:before {
right: 100%;
margin-right: 20px;
}
span:after {
left: 100%;
margin-left: 20px;
}
<div>
<p class="strike"><span>Phrase</span></p>
</div>
I added a line on left and right of text but with 2 problems:
The line gets outside of the P border;
The P does not fill the entire width off the container DIV.
How can I solve these problems?
I've left your original CSS in but commented much of it out. FlexBox is a good way to achieve what you want (as opposed to position: absolute and position: relative:
/*body {
text-align: center;
}*/
div {
border: 1px solid black;
margin: 0 auto;
width: 200px;
}
p {
border: 1px solid red;
/*line-height: 0.5;*/
/*margin: 20px;*/
/*text-align: center;*/
}
span {
display: flex;
/*position: relative;*/
/*width: 100%;*/
align-items: center;
}
span:before,
span:after {
content: "";
/*position: absolute;*/
/*height: 5px;*/
border-bottom: 1px solid black;
/*top: 0;*/
width: 100%;
}
span:before {
/*right: 100%;*/
margin-right: 20px;
}
span:after {
/*left: 100%;*/
margin-left: 20px;
}
<div>
<p class="strike"><span>Phrase</span></p>
</div>
use left:0; and right:0 to make sure the lines stay within the borders
The margins you have on the p is what's stopping it from filling the entire width of the container.
Also the span is not really needed.
body {
text-align: center;
}
div {
border: 1px solid black;
margin: 0 auto;
width: 200px;
}
p {
border: 1px solid red;
line-height: 0.5;
/* margin: 20px; to span full width*/
text-align: center;
position: relative;
}
p:before,
p:after {
content: "";
position: absolute;
height: 1px;
background:black;
top: 50%;
transform:translateY(-50%);
width: 20%;
}
p:before {
left: 0;
}
p:after {
right: 0;
}
<div>
<p class="strike">Phrase</p>
</div>
I am trying to create half borders between DIV elements contained within a DIV element with the help of CSS using ::after. Unfortunately , this only ever renders the border on the outside of the encompassing DIV element. I would appreciate the help.
Here is my code:
HTML:
<div class="menu">
<div class="subDiv1">Foo</div>
<div class="subDiv2">Bar</div>
<div class="subDiv3">Baz</div>
</div>
CSS:
.menu {
position: relative;
display: inline-block;
float: left;
padding: 0 10px;
margin-left:auto;
margin-right:auto;
width: 75%;
height: 150px;
position: relative;
margin-top: 2%;
border-width: 1px;
border-style: thin solid;
border-color: #008040;
overflow: hidden;
box-shadow: 0 0 10px 1px #7e8083;
}
.subDiv1 {
width: 33%;
height: 150px;
background-color: #fff;
float: left;
color: #7e8083;
}
.subDiv1::after {
content:"";
background: black;
position: absolute;
bottom: 25%;
right: 0;
height: 50%;
width: 1px;
}
.subDiv2 {
width: 33%;
height: 150px;
background-color: #fff;
float: left;
color: #7e8083;
}
.subDiv2::after {
content:"";
background: black;
position: absolute;
bottom: 25%;
right: 0;
height: 50%;
width: 1px;
}
.subDiv3 {
width: 33%;
height: 150px;
background-color: #fff;
float: left;
color: #7e8083;
}
https://jsfiddle.net/2yGQD/1727/
Add position:relative to your subdivs
.subDiv1 {
position:relative;
width: 20%;
height: 150px;
background-color: #fff;
float: left;
color: #7e8083;
}
I have a line below my h2 element.
It is left aligned, but I'd like to center align this directly below the text.
Can someone help resolve this?
Demo: https://jsfiddle.net/4es6ugjn/
h2 {
display:block
}
h2:after {
border-bottom: 4px solid #ae263d;
content: "";
display: block;
margin-top: 10px;
width: 50px;
}
<h2 class="text-center">Welcome to our Website</h2>
Try this
h2 {
display: inline-block;
position:relative;
}
h2:after {
border-bottom: 4px solid #ae263d;
content: "";
display: block;
width: 50px;
left: 0;
right: 0;
margin: 0 auto;
position:absolute;
}
Best way would be to use display: inline-block on the parent & margin: auto on the child.
h2 {
display:inline-block
}
h2:after {
border-bottom: 4px solid #ae263d;
content: "";
display: block;
width: 50px;
margin: 10px auto 0 auto;
}
<h2 class="text-center">Welcome to our Website</h2>
Alternatively, instead of using margin as suggested by others, you can set left: 50%; and transform: translateX(-50%);
This method of centering can come in handy when you are unable to use margin, or you have a margin set for another reason.
h2 {
display: inline-block;
position:relative;
}
h2:after {
border-bottom: 4px solid #ae263d;
content: "";
display: block;
width: 50px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<h2 class="text-center">Welcome to our Website</h2>
Try this:
h2 {
display:inline-block;
}
h2:after {
border-bottom: 4px solid #ae263d;
content: "";
display: block;
margin-top: 10px;
width: 50px;
margin-left: auto;
margin-right: auto;
}
Try this code for this issue
h2 {
display: block;
text-align: center;
}
h2:after {
border-bottom: 4px solid #ae263d;
content: "";
display: block;
margin: 10px auto 0px auto;
width: 50px;
}
<h2 class="text-center">Welcome to our Website</h2>
I'm putting design into html+css - the question is - how do i draw curved lines on the sides, so that it would be scalable and responsive? What's the best way to do it
you can try this one:
section{
margin: 0 auto;
width: 600px;
text-align: center;
}
h1 {
position: relative;
//margin-top: 20px;
}
h1.one {
margin-top: 0;
}
h1.one:before {
content: "";
display: block;
border: solid 1px black;
width: 100%;
height: 150px;
position: absolute;
top: 50%;
z-index: 1;
border-radius:5px;
}
h1.one span {
background: #fff;
padding: 0 20px;
position: relative;
z-index: 5;
}
/* method 2*/
button
{
padding:8px;
background-color: gray
color:white;
border: 2px solid;
border-radius: 15px;
margin-top:2px;
position: relative;
z-index: 5;
}
.circle
{
border:4px solid red;
height: 70px;
width: 70px;
border-radius: 40px;
position:relative;
margin:10px auto;
display:inline-block;
}
.row
{
height: 100px;
width: 700px;
margin: 10px;
text-align:center;
position:relative;
}
DEMO FIDDLE
Check as per the description this answer get your perfectly needs.
body {
background:#007DAD;
}
section {
text-align: center;
}
h1.one {
position: relative;
margin-top: 0;
}
h1.one:before {
content: "";
display: block;
border: solid 1px #FFF;
width: 100%;
height: 150px;
position: absolute;
top: 50%;
z-index: 1;
border-radius:5px;
}
h1.one span {
background: #007DAD;
padding: 0 20px;
position: relative;
z-index: 5;
}
.row {
height: 100px;
margin: 10px;
}
.circle {
border:4px solid red;
height: 70px;
width: 70px;
border-radius: 40px;
margin:10px auto;
display:inline-block;
}
button {
padding:10px;
background-color: gray;
color:white;
border: 2px solid;
border-radius: 5px;
margin-top:-10px;
position: relative;
z-index: 5;
}
<section>
<h1 class="one">
<span>It Has Naver Been Easier</span>
</h1>
<div class="row">
<div class="circle"><p>1</p></div>
<div class="circle"><p>2</p></div>
<div class="circle"><p>3</p></div>
</div>
<button type="button">Order Now</button>
</section>