0
123
ViewsHTML H1 - Header Styles Complications
div {
background-color: #ccc;
width: 100%;
color: #ffffff;
}
div > div {
background-color: #000;
width: 80%;
margin: auto;
}
h1::before {
content: '';
display:block;
height: 30px; /*height of icon */
width: 30px; /*width of icon */
border-radius: 15px;
color: #fff;
position: absolute;
left: 5%;
margin-top: 30px;
/*background */
background: #ffffff no-repeat 0px 0px;
}<div><div><h1>Für Designer, Schriftsetzer, Layouter, Grafikenthusiasten und alle anderen</h1><div><div>The example code above is using a inside another . The actual code uses a layout that is inside another container. So the dot and line elements in the screenshot are outside that container.
The dot is currently displayed with a pseudo-element. I can display the circle but I would like to create the line on the left of it as well. The left-end of the line needs to be stretched to the left edge of the browser.
Thanks
·
Juan Pablo Isaza
2 answers
Answer question0
div {
background-color: #ccc;
width: 100%;
color: #ffffff;
}
div > div {
background-color: #000;
width: 80%;
margin: auto;
}
h1::before {
content: '';
display:block;
height: 30px; /*height of icon */
width: 30px; /*width of icon */
border-radius: 15px;
color: #fff;
position: absolute;
left: 5%;
margin-top: 30px;
/*background */
background: #ffffff no-repeat 0px 0px;
}
h1::after {
content: '';
display: block;
height: 6px;
width: 41px;
border-radius: 15px;
color: red;
position: absolute;
left: 0%;
margin-top: 30px;
background: #ffffff no-repeat 0px 0px;
top: 35px;
}<div><div><h1>Für Designer, Schriftsetzer, Layouter, Grafikenthusiasten und alle anderen</h1><div><div>
·
Juan Pablo Isaza
Report
0
You can solve this by adding an :after pseudo-element to your H1 element and apply some styles to it.
I've created a code example that might help you out. It also centers the dot and line vertically if the header is being displayed with multiple lines:
div {
background-color: #ccc;
width: 100%;
color: #ffffff;
}
div>div {
background-color: #000;
width: 80%;
margin: auto;
}
h1 {
position: relative;
}
h1::before {
content: '';
display: block;
height: 30px;
width: 30px;
border-radius: 15px;
color: #fff;
position: absolute;
left: -5%;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background: #ffffff no-repeat 0px 0px;
}
h1::after {
content: '';
display: block;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: -105%;
border: 1px solid blue;
width: 100%;
} <div><div><h1>Für Designer, Schriftsetzer, Layouter, Grafikenthusiasten und alle anderen</h1><div><div>
·
Juan Pablo Isaza
Report
Answer question