What I try to create is a simple line that will go after the text vertically centered. So far, I've come up with the following solution:
<h1>lorem ipsum <span></span></h1>
h1 > span {
display: inline-block;
height: 1px; width: 50px;
margin-bottom: .2em;
background-color: black;
}
https://jsfiddle.net/7xqp7m2h/
The bad thing about this approach (not to mention that the line is not 100% vertically centered) is that this is a too compilcated solution for such an easy task.
What I thought about is maybe to add a line-through an invisible text within the span:
h1 > span {
text-decoration: line-through;
}
However, I failed to make it work.
Any ideas on how to make a visible line-through with hidden text, or maybe another solution that would be simplier than what I have now?
No need for a span at all.
A pseudo-element and flexbox can do that.
JSFiddle Demo
h1::after {
content: '';
height: 1px;
background: red;
flex: 1;
margin-left: .25em;
}
h1 {
display: flex;
align-items: center;
}
<h1>lorem ipsum</h1>
Flex can easily help you (set a width if you wish to h1 or pseudo ).
the use of a pseudo avoids the extra span in the HTML, you can apply it to any title level .
h1 {
display: flex;
background: gray;
}
h1:after {
content: '';
border-top: 1px solid;
flex: 1;
margin: auto 0.5em;
}
<h1>lorem ipsum </h1>
https://jsfiddle.net/7xqp7m2h/4/
https://jsfiddle.net/9crkt4hn/
Using as text in the span will make a space without seeing it as a space :P
As you see in the fiddle you see it works without problems.
Related
Question regarding CSS.
I will receive sentences like: This is a sentence and I will automatically break it to new lines regarding the parent's container width. So, for example, I will have
This is
a sentence
What I am trying to do can actually can be seen in this code example. The lines are highlighted but there is some space (with white color) between lines. When setting some color background-color: black I can't create such spaces changing line-height. I also tried setting linear-gradient as background but it doesn't work the way I wanted.
This can be done by wrapping lines in span tags, but I want to avoid additional backend work.
Is there any obvious solution I missed or is a little bit tricky?
div {
width: 200px;
}
h1 {
background-color: red;
line-height: 50px;
}
<div>
<h1>Some text and its wrapping</h1>
</div>
Without backend work it is simply not possible - you need a wrapping element for the fixed width.
But you don't need extra elements for each line. Check this:
div {
width: 200px;
display: block;
}
h1 {
background-color: red;
font-size: 36px;
font-weight: bold;
line-height: 50px;
display: inline;
}
<div>
<h1>This is a sentence.</h1>
</div>
Or you use pseudo elements:
div {
width: 200px;
display: block;
}
div:after {
background-color: red;
font-size: 36px;
font-weight: bold;
line-height: 50px;
display: inline;
content: attr(data-content);
}
<div data-content="This is a sentence."></div>
I am working on a Wordpress blog, and I am trying to figure out how to add horizontal lines on each side of some of my titles like the ones in this link:
http://falive.jegtheme.com/?slider=highlightslider&homelayout=normal&homesidebar=true&layout=full&header=1&sticky=true
In the blog above, titles in the sidebar, and the 'share this article' title has the desired effect that I am looking for, but can't seem to figure out how to get it. I know the basics of HTML and CSS, so this could be something that I am simply overlooking or just haven't learned yet.
Also, is there a way to take this type of styling to the next level by adding more unique types of lines (like long curly lines) through CSS?
Thanks in advance!
use :before or :after
Example 1:
h2{
padding: 0 20px;
text-align: center;
}
h2:before,
h2:after{
content: '';
width: 150px;
height: 1px;
margin: 0 10px;
background: #ccc;
display: inline-block;
vertical-align: middle;
}
<h2>title</h2>
<h2>title title title</h2>
Example 2
div{
text-align: center;
}
h2 {
padding: 0 20px;
position: relative;
text-align: center;
display: inline-block;
}
h2:before,
h2:after {
content:'';
width: 100%;
position: absolute; top: 50%;
height: 1px;
background: #ccc;
transform: translateY(-50%);
}
h2:before{
right: 100%;
}
h2:after{
left: 100%;
}
<div>
<h2>title</h2>
<br>
<h2>title title title</h2>
</div>
Using your browser's developer tools, inspect the span elements containing those titles. You'll see :before and :after CSS3 selectors in which some positional/border styling is used.
Can you use other kinds of lines? Sure -- CSS3 would allow you to use a wide variety of things, but the list is probably too long to list here on SO.
This is my code but I want the text to only have background color behind it, and not stretch across the entire screen? Any ideas?
.section_title {
background-color: orange;
text-align: center;
margin: 0px auto;
}
HTML is
<div class="col-md-12">
<div class="section_title">
<h2>Choose a Pack to Print</h2>
</div>
</div>
An option is adding display: inline-block; to the CSS of the text element.
One problem I found with display: inline-block; is it clears floats incorrectly. Instead, I use width: fit-content;
.highlight {
background: yellow;
padding: 0.5em;
width: fit-content;
}
<h1 class="highlight">Highlight for text only!</h1>
<h1 class="highlight">Highlight me too!</h1>
There's a few ways to do this, but probably the best way is to make the h2 inline or inline-block.
Using inline-block will allow you to set width/height.
.section-title {
text-align: center;
}
.section-title h2 {
display: inline-block;
}
The other way to do this is to set a width on the h2 and set the margin to auto;
.section-title h2 {
margin-left: auto;
margin-right: auto;
width: 50%; /* for example */
}
If you want all your headings to be a set width, I'd choose the second one (allowing for text to wrap). If you want the box to be flexible and hug the contents, I'd use the first.
Ok I now use an image to do it, but I want to do it via CSS(no absolut or relative positioning, I'm looking to make it responsive).
Example here: http://teothemes.com/wp/services/. The heading is 'Services', right above the 3 content areas...I'd like to achieve the same effect with only CSS. I tried some things but it didn't work.
Thank you.
Here's how I'd do it -> http://tinkerbin.com/QN9efWHd
CSS3 background-image
span with background covering the background image.
the HTML...
<p>
<span>Services or Something</span>
</p>
... for the CSS...
p {
background: linear-gradient (to bottom, rgba(145,37,37,0) 49%,
rgba(145,37,37,1) 51%, rgba(145,37,37,1) 52%,
rgba(145,37,37,0) 54%);
text-align: center;
}
span {
display: inline-block;
padding: 0 10px;
background: #fff;
}
Here's my go at it... Only thing is the spans have a set width.
HTML
<div id="hr">
<span></span>
asdf
<span></span>
</div>
CSS
#hr span {
width:200px;
border-bottom:1px solid #ccc;
display: inline-block;
margin-bottom:5px;
}
DEMO
Using one floated span with a border:
<div class="heading">
<span></span>
<h3>Heading<h3>
</div>
.heading {
width: 100%;
text-align: center;
line-height: 100%;
}
.heading span {
float: left;
margin: 20px 0 -8px;
border: 1px solid;
width: 100%;
}
.heading h3 {
display: inline;
padding: 0px 0px 0 20px;
width: auto;
margin: auto;
}
The negative base margin on the span may need to be adjusted for different heading sizes. , The background colour of the heading should match the background of the overall container.
JS Fiddle demo
I was looking at a bunch of solutions to this issue, and I really wanted something simple. Why not just use the :before and :after to embed some content into the heading you want to have a horizontal-rule/line in. In my CSS below I chose an EM DASH (unicode \2014) for the heading's horizontal line. When making a larger horizontal line, and depending on your font, you need to take away letter spacing from multiple EM DASHes. Lastly you can add some padding to the head & tail of the EM DASH so that it doesn't press up against your heading text.
Here's some CSS, heading-1 is very simple, heading-2 has a longer line (see in action https://jsfiddle.net/pyxkh3jz/):
h1:before, h1:after {
content:"\2014";
}
h2:before, h2:after {
/* two dashes */
content:"\2014\2014";
/* depending on your font adjust this */
letter-spacing: -6px;
}
/* add some padding so heading text isn't touching lines */
h2:before {
padding-right: 15px;
}
h2:after {
padding-left: 15px;
}
Haven't checked browser compatibility here; but this isn't radical CSS so it should work for some or most of you. The lines and their length fit my use case.
This idea can probably be improved upon by other keeners...have at it!
I have the following HTML:
<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>
with this CSS:
.title
{
display: block;
border-top: 4px solid #a7a59b;
background-color: #f6e9d9;
height: 22px;
line-height: 22px;
padding: 4px 6px;
font-size: 14px;
color: #000;
margin-bottom: 13px;
clear:both;
}
If you check this jsFiddle:
http://jsfiddle.net/8JwhZ/
you can see that the Name & Date are stuck together. Is there a way that I can get the date to align to the right? I've tried float: right; on the second <span> but it screws up the style, and pushes the date outside of the enclosing div
If you can modify the HTML: http://jsfiddle.net/8JwhZ/3/
<div class="title">
<span class="name">Cumulative performance</span>
<span class="date">20/02/2011</span>
</div>
.title .date { float:right }
.title .name { float:left }
Working with floats is bit messy:
This as many other 'trivial' layout tricks can be done with flexbox.
div.container {
display: flex;
justify-content: space-between;
}
In 2017 I think this is preferred solution (over float) if you don't have to support legacy browsers: https://caniuse.com/#feat=flexbox
Check fiddle how different float usages compares to flexbox ("may include some competing answers"): https://jsfiddle.net/b244s19k/25/. If you still need to stick with float I recommended third version of course.
An alternative solution to floats is to use absolute positioning:
.title {
position: relative;
}
.title span:last-child {
position: absolute;
right: 6px; /* must be equal to parent's right padding */
}
See also the fiddle.
The solution using flexbox without justify-content: space-between.
<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>
.title {
display: flex;
}
span:first-of-type {
flex: 1;
}
When we use flex:1 on the first <span>, it takes up the entire remaining space and moves the second <span> to the right. The Fiddle with this solution: https://jsfiddle.net/2k1vryn7/
Here https://jsfiddle.net/7wvx2uLp/3/ you can see the difference between two flexbox approaches: flexbox with justify-content: space-between and flexbox with flex:1 on the first <span>.
You can do this without modifying the html.
http://jsfiddle.net/8JwhZ/1085/
<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>
.title span:nth-of-type(1) { float:right }
.title span:nth-of-type(2) { float:left }
ul { /** works with ol too **/
list-style: none; /** removes bullet points/numbering **/
padding-left: 0px; /** removes actual indentation **/
}