This question already has answers here:
Line before and after title over image [duplicate]
(2 answers)
Closed 7 years ago.
This is the html part :
<div class="sama_productblocks_grid">
<div class="title-bar">
<h3>Nieuwste producten</h3>
</div>
.....
</div>
This is the css
.sama_productblocks_grid .title-bar h3 {
margin: 0;
position: relative;z-index: 3;
font-size:18px;
display: inline-block;
color: #6D6C6C;
font-weight: 400;
text-transform: uppercase;
font-family: "Open Sans",sans-serif !important;
padding: 0px 65px;
}
/*newest product*/
.title-bar{
position: absolute;
overflow: hidden;
margin-bottom: 10px;
text-align: center;
border-bottom:3px solid black;
z-index: 3;
width:100%;
margin-bottom: 10px;
}
.sama_productblocks_descrition {margin-top:40px;}
What i want to achieve is to put a line before and after the text: Nieuwste producten. So I want to look like this:
----------- Nieuwste producten ------------
Is this what you are looking for?
body {
margin-top: 50px;
}
.hr-div {
height: 1px;
background-color: #e6e6e7;
text-align: center;
margin: 10px 0 10px -10px;
}
.hr-span {
background-color: white;
position: relative;
top: -10px;
padding:0 10px;
}
<div class="hr-div">
<span class="hr-span">Your Title Here</span>
</div>
Do you mean something like this:
h3:before {
content: "---------------- "
}
h3:after {
content: " ----------------"
}
Related
This question already has answers here:
Create line after text with css
(8 answers)
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 1 year ago.
I am trying to get a line through the a tag for decorative effect. The line should span the entire width but not go through content of the tag itself.
This is what I want,
This is what I've got so far.
a {
background: none;
}
a::after {
content: "";
border: 3px solid #000;
display: block;
position: relative;
top: -50%;
}
<a class="fw-bold" href="">Explore Services</a>
And here is the jsfiddle of the above code https://jsfiddle.net/68fkvhcw/
Why is the position relative with negative top margin not working?
This would be a possible way to do that. Wrap the a tag all around the elements, make that a flex container and use settings similar to those of my snippet below:
html,
body {
margin: 0;
}
a.link1:link,
a.link1:visited {
text-decoration: none;
font-size: 24px;
color: green;
}
.link1 {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
background: #dfd;
padding: 6px 10px;
}
.text1 {
flex-grow: 0;
display: inline-block;
}
.line {
height: 2px;
background: #fa0;
flex-grow: 1;
margin: 0 20px 0;
}
<a class="link1" href="#">
<div class="text1">Explore all Services</div>
<div class="line"></div>
</a>
I have created a code snippet as you want. But here is a suggestion that doesn't use styles directly on <a> tag else it will affect all your <a> tags on the page. So I have defined a style here .my_underline
You can adjust the thickness of the line and the color of the font.
.my_underline {
overflow: hidden;
text-decoration: none;
font-size: 2rem;
font-weight: bold;
color:aqua;
}
.my_underline:after {
content:"";
display: inline-block;
height: 0.5em;
vertical-align: bottom;
width: 100%;
margin-right: -100%;
margin-left: 10px;
border-top: 1px solid black;
}
<a class="fw-bold my_underline" href="">Explore all Services</a>
Use theses styles ,
a {
color: #000000;
font-family: 'collegeregular';
font-size: 20px;
margin-left: 5px;
position: relative;
width: 93%;
}
a::after {
position: absolute;
content: "";
height: 2px;
background-color: #242424;
width: 50%;
margin-left: 15px;
top: 50%;
}
<a class="fw-bold" href="">Explore Services</a>
This question already has answers here:
heading with horizontal line on either side [duplicate]
(3 answers)
Closed 4 years ago.
I'm trying to figure out how to make two divider lines, that are separated by text. see pic for example
I can make a single line,
but I don't know how to make two that or inline and have text in the middle.
If the background is just a solid color then you can create a container width a width 100%; height: 1px container and put the text on the middle, with a bigger z-index and the same background color as the page background.
Here is an example (using a pseudo-element to create the line)
body {
background: #fafafa;
font-size: 15px;
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.section-header {
position: relative;
text-align: center;
}
.section-header:before {
content: '';
z-index: 1;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 1px;
background: #dddddd;
}
.section-header__title {
position: relative;
z-index: 2;
background: #fafafa;
padding: 5px 20px;
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
display: inline-block;
color: #174750;
}
<div class="section-header">
<span class="section-header__title">Day 1</span>
</div>
Try this. Create a div with two hr and a span. Then give it some styles. For example:
<style>
.pos_left{
color: #f00;
width: 40%;
}
.pos_right{
color: #f00;
width: 40%;
}
span{
width: 10%;
}
.line{
position: absolute;
top: 10%;
width: 40%;
display: flex;
flex-wrap: wrap;
}
</style>
<div class='line'>
<hr class='pos_left'><span>Day 1</span><hr
class='pos_right'>
</div>
You can style and position it accordingly.
Something like this should work fine.
Also if you want to increase the space between the text and the lines, just increase the second value of the "padding: 0px 10px;" eg. "padding: 0px 25px;"
<div style="margin-top: 20px; width: 100%; height: 10px; border-bottom: 1px solid #e3e3e3; text-align: center; margin-bottom: 30px;">
<span style="font-size: 15px; background-color: #ffffff; padding: 0px 10px;">
SOME TEXT HERE
</span>
</div>
I have 4 posts in my HTML page, they look same except the text content and images and colors of text and background, in the image below you will find the result that i want:
my question is how can i style every post without creating class css for every post i want just change colors
this i my code
.art-content {
position: relative;
}
.art-content img {
width: 100%;
}
.main-content article {
margin-top: 15px;
}
.main-content article:nth-child(2n) {
padding-left: 0px;
}
.main-content article:nth-child(2n+1) {
padding-left: 15px;
padding-right: 0px;
}
.main-content article:nth-child(2n) {
padding-left: 0px;
}
.main-content article:nth-child(2n+1) {
padding-left: 15px;
padding-right: 0px;
}
.rect-date-even {
position: absolute;
display: block;
background-color: #c2022a;
width: 75px;
height: 77px;
top: 0;
left: 0;
text-align: center;
padding: 9px 6px 15px 4px;
}
.rect-date-even span {
font-family: 'Quicksand';
font-size: 20px;
color: white;
padding-bottom: -10px;
}
.rect-info-art {
position: relative;
width: 100%;
height: 105px;
background-color: #dcdcdc;
}
.rect-cat {
position: absolute;
width: 120px;
height: 18px;
background-color: #c2022a;
color: white;
font-family: 'Quicksand';
font-size: 12px;
padding-left: 3px;
top: 10px;
left: 25px;
}
.rect-info-art p {
position: absolute;
font-style: italic;
font-size: 18px;
max-height: 10px;
padding-right: 50px;
top: 30px;
left: 25px;
}
.rect-info-art a {
position: absolute;
color: #c2022a;
font-size: 14px;
text-align: center;
top: 70px;
right: 20px;
}
<section class="col-md-8 col-lg-8 main-content">
<div class="title-section-bg">
<img src="assets/img/ombre-title-section.png">
<div></div>
<span class="icon-megaphone"></span>
<h2>Prochainement a Rabat</h2>
</div>
<article class="col-md-6 col-lg-6 art-content">
<img src="assets/img/IMG-even1.png">
<div class="rect-date-even">
<span>03</span>
<span>AVR</span>
</div>
<div class="rect-info-art">
<div class="rect-cat">Musique du monde</div>
<p>Rihanna en concert à Mawazine 2015</p>
détails <span class="icon-circle-plus"></span>
</div>
</article>
<article class="col-md-6 col-lg-6 art-content">
<img src="assets/img/IMG-even1.png">
<div class="rect-date-even">
<span>03</span>
<span>AVR</span>
</div>
<div class="rect-info-art">
<div class="rect-cat">Musique du monde</div>
<p>Rihanna en concert à Mawazine 2015</p>
détails <span class="icon-circle-plus"></span>
</div>
</article>
</section>
thanks for helping
Use the :nth-of-type(n) pseudo selector to style them individually.
div {
width: 100px;
height: 100px;
margin: 5px;
}
div:nth-of-type(1) p {
background-color: red;
}
div:nth-of-type(2) p {
background-color: blue;
}
div:nth-of-type(3) p {
background-color: yellow;
}
div:nth-of-type(4) p {
background-color: green;
}
<div><p>hello</p></div>
<div><p>hello</p></div>
<div><p>hello</p></div>
<div><p>hello</p></div>
Use e.g.
article:nth-of-type(1) .rect-date-even {
background-color: green;
}
This selects all elements with the class rect-date-even that are descendants to any article that is the first article inside its parent element.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
nth-child (which you have tried) does not take into account element name (or class or whatever) - all it ever asks is
Am I the nth-child of my parent (regardless of element name, class, id, attributes whatever)?
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
I want to that symbol -> (text element) would only appear in second line. For example if text would be one line
John
->
and if there would be two lines of text symbol would still be on second line.
John and
Tom ->
is it possible?
Currently how it is:
HTML
<div class="inner-box">
<span class="inner-box-text">Category<i class="icon-font icon-long-arrow"></i></span>
</div>
CSS
.inner-box {
bottom: 16%;
left: 10%;
right: 25%;
text-align: left;
position: absolute;
z-index: 3;
height: 51px;
}
.inner-box span {
display: inline-block;
text-align: left;
text-transform: uppercase;
text-decoration: none;
color: white;
line-height: 25px;
max-width: 270px;
padding-right: 5px;
}
.inner-box i {
padding-top: 5px;
}
first of all the span should be closed as well like so:
<div class="inner-box">
<span class="inner-box-text">Category<i class="icon-font icon-long-arrow"></i></span>
</div>
What you are likely looking for is CSS selector :after
<style>
.inner-box-text:after {
content: " --- whatever should come after";
}
</style>
Sadly the :after selector does not support HTML, only text.
Another possibility would be the use of jQuery to append something.
Alex
you can use below code
<div class="inner-box">
<span class="inner-box-text">Category</span><i class="icon-font icon-long-arrow"></i>
</div>
and below css
.vip-inner-box {
bottom: 16%;
left: 10%;
right: 25%;
text-align: left;
position: absolute;
z-index: 3;
height: 51px;
span {
display: inline-block;
text-align: left;
text-transform: uppercase;
text-decoration: none;
font: $font-weight-light 24px $font-custom;
color: white;
line-height: 25px;
max-width: 270px;
padding-right: 5px;
}
}
i {
padding-top: 5px;
display:block;
}
This question already has answers here:
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 3 years ago.
I would like to have a divider on my page that looks like this:
What is the best way to do that?
html
<h3><span>My latest work</span></h3>
css
h3 {
position:relative;
text-align:center;}
h3 span {
display:inline-block;
padding:0 10px;
background:#fff;
}
h3:before {
content:"";
display:block;
position:absolute;
z-index:-1;
left:0;
right:0;
top:50%;
height:1px;
background:#ccc;
}
We can do this without images or masking lines like so:
HTML
<div class="rule">
<div class="line"><div></div></div>
<div class="words">words are cool</div>
<div class="line"><div></div></div>
</div>
CSS
.rule {
display: table;
}
.rule>div {
display: table-cell;
white-space:nowrap;
}
.line>div {
border-bottom: 1px solid silver;
height: 1px;
}
.words {
padding: 0 5px;
}
.line {
width: 50%;
vertical-align: middle;
}
Demo: http://jsfiddle.net/5tqE5/1/
This uses attr() which is not supported in older browsers. It could be replaced with an extra element.
<div class="lines" data-text="Some Text Goes Here"></div>
.lines {
position: relative;
font-size: 20px;
font-family: sans-serif;
margin: 0 auto;
border-top: 1px solid silver;
margin-top: 20px;
}
.lines:before{
content: attr(data-text);
background-color: #fff;
position: absolute;
text-align: center;
left: 50%;
width: 220px;
margin-left: -110px;
padding: 10px;
top: -20px;
}
Dunno about the 'best' - you've given no terms by which to assess that. Smallest, fastest, most compatible, etc, etc.
Anyhoo, I just took a 1-pixel wide slice of your image and saved it. I then use it as the background-image of the div.
CSS:
#myDiv
{
background: url(horizline1x41px.png) repeat;
text-align: center;
line-height: 41px;
}
#myDiv span
{
padding-left: 16px;
padding-right: 16px;
background: white;
font-weight: bold;
font-size: 1.5em;
}
HTML:
<div id='myDiv'><span>OUR LATEST WORK</span></div>
Demo: http://jsfiddle.net/8zve4/
I don't like the extra markup, but this should work.
CSS:
.hline {
border: 1px solid #EEE;
color: #666;
font-family: helvetica;
font-weight: bold;
font-variant: small-caps;
letter-spacing: .1em;
line-height: 0px;
text-align: center;
text-transform: uppercase;
}
.hline > span {
background-color: #FFF;
padding: 0px 1em;
}
HTML:
<div class="hline"><span>Our latest work</span></div>