After each h2 I want to append and style a dash and after that a line break.
I tried the following:
h2:after {
content: '\A\2014';
white-space: pre;
font-size: 70px;
}
It does work in general, but when I in- or decrease the font-size, the space both over and under the dash change, instead of just the dash-size.
I also tried adding a line-height: 0.6em; but it seems to move everything around.
At the moment I'm getting this:
I want to get this, being able to change the space:
Here is the FIDDLE
Why don't you just use borders?
h2 { border-bottom: 4px solid #000; }
and then you could just adjust the padding on the bottom of the H2:
h2 { padding-bottom: 15px; border-bottom: 4px solid #000; }
UPDATE BASED ON COMMENTS
To keep the dash the same width regardless of the title width I simply styled the :after pseudo element with a border and display block: http://jsfiddle.net/uzVhz/2
Related
This jsfiddle looks like this:
I want it to look like this (I created this with MS Paint)... flush:
Is there anything I can add to the styles to achieve this?
div {
border: 1px solid blue;
font-size: 50px; // this number should be treated as arbitrary
}
One option is to use line-height. The amount will depend on the font-family you are using. The advantage would be that line-height can directly depend on font-size so it can be dynamic. However, it doesn't have a concept of vertical top and bottom individually (it applies to both) so you won't have that space under the text.
div {
border: 1px solid blue;
font-size: 70px;
font-family: 'Times';
line-height: 0.7; /* This will work for any font-size on 'Times'*/
}
<div>Hello</div>
You could simulate that bottom space by wrapping the text in an element with margin-bottom.
div.outer {
border: 1px solid blue;
font-size: 70px;
}
div.inner {
font-family: 'Times';
line-height: 0.7;
margin-bottom: 20px;
}
<div class="outer">
<div class="inner">Hello</div>
</div>
Another option is to use relative positioning. An advantage of this method over line-height is that the div size does not change.
div {
border:1px solid blue;
font-size: 64px; // works for arbitrary font sizes
}
span{
position:relative;
top:-0.21em;
}
<div>
<span>Hello</span>
</div>
As with line-height, you might have to adjust "-0.21em" depending on your font. -0.21em worked well for me for sans-serif and serif, but not cursive.
Okay so I am currently using this for my <a> tags in HTML, and here is my css for it
#button {
border-style: solid;
border-width: 1px;
border-bottom-width: 5px;
width: auto;
padding-left: 2px;
padding-right: 2px;
text-decoration:none;
color: gray;
}
#button:hover {
color: black;
}
But sadly the buttons are bigger then a standard line and just overlap eachother, for example:
Here is some text [button]
here is some more text [button]
Where the [button]s is beneath/ontop of the other it overlaps in the browser, (if that makes sense)
Here is a screenshot:
How can I make it so it creates a kind of area around it where it cant overlap and will push other elements outwards or so, margin seems to not work (top and bottom does nothing) and padding seems to make the 1px border bigger in height, thanks!
Add
display:inline-block;
to your button selector, e.g.:
#button {
border-style: solid;
border-width: 1px;
border-bottom-width: 5px;
width: auto;
padding-left: 2px;
padding-right: 2px;
text-decoration:none;
color: gray;
display:inline-block;
}
As an aside, i'd recommend that button is a class rather than an id, because you shouldn't really have multiple elements with the same id on the same page.
The distance between the lines in your example is too short to display a Button-Text surrounded by border with space that fits into that line.
So I sugesst to increase the line-height of the default Text.
Here an example: JSFiddle-Example
I have an <h2> title into a fixed with <div> (238px). When this page is rendered, the browser manage line breaks into the title to make the text fit the width (238px).
But the width property of the h2 element is still 238px, no matters where the line breaks are.
I want to set a border-bottom only under the text, and not under the full width of the h2 element, and I don't know how to achieve this using CSS.
You can see what I mean here : http://jsfiddle.net/np3rJ/2/
Thanks
I think this is what you need:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
h2 span {
position: relative;
padding-bottom: 5px;
}
h2 span::after{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
content: ""
}
Working demo in jsFiddle
I used the technique described in this answer: Advanced CSS challenge: underline only the final line of text with CSS
I introduced a span into the H2 in order not to change the display attribute of it, but you could just as easily use the same technique with a display: inline on your H2. This method would allow the control of the actual line though rather than setting display: inline if needed
This works on Chrome.
h2 {
width: fit-content;
}
If you are willing to use display: table-cell, and pseudo-elements, you can have a pretty good solution (with some minor limitations).
The HTML does not change:
<div class="dossier_titre">
<h2>Horizon 2020, nouvelles opportunités</h2>
</div>
and you can apply the following CSS:
.zone_33 {
width: 238px;
padding: 0px;
margin: 0px;
}
.zone_33 .dossier_titre {
margin: 0px 0px 20px 0px;
}
.zone_33 h2 {
color: #616263;
font-size: 150%;
font-weight: lighter;
padding: 0px 0px 12px 0px;
background: none;
border-bottom: 1px solid grey;
display: table-cell;
text-transform: uppercase;
}
.zone_33 .dossier_titre:after {
content: "";
display: table-cell;
width: 100%;
}
For the <h2> element, set display: table-cell, and add a pseudo-element after .dossier_titre (the containing block for the header/title element). The pseudo-element is also a table-cell and has a width of 100% (this is the key).
Also, since h2 is no longer a block element, add your margins to .dossier_titre to maintain the visual spacing in our layout.
How This Works
I am creating a two-cell table with the second cell (the pseudo-element) having a width of 100%. This triggers the browser to calculate the shrink-to-fit width for the first cell (h2) that contains the title text. The first cell's width is thus the minimal needed to display the text. The bottom border is as long as the longest text line in the text block within the table-cell.
Limitations
table-cell is not supported in IE7 without a hack, but the work-around is fairly well known and can be found if needed.
If the title had many short words, you might get the line breaking in unexpected places. You would need to insert   to keep specific words together as needed.
Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/
Maybe display: inline-block; Or display: inline; is what you need?
Why not try:
text-decoration:underline
?
EDIT
Just make a span around "OPPORTUNITÉS" with the underline.
<h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
text-decoration:underline
}
Can try "text-underline-position" property instead of table-cell and border. Make it simple!
text-decoration: underline;
text-underline-position: under;
All you can do is put your h2 element text into span like this:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
and in css remove border-bottom from .zone_33 h2 {} and put it like this:
.zone_33 h2 span{ border-bottom: 1px solid grey;}
by this border-bottom will come under full text.
Try this, (I think it will help you)
.heading {
position: relative;
color: $gray-light;
font-weight: 700;
bottom: 5px;
padding-bottom: 5px;
display:inline-block;
}
.heading::after {
position: absolute;
display:inline-block;
border: 1px solid $brand-primary !important;
bottom: -1px;
content: "";
height: 2px;
left: 0;
width: 100%;
}
You could put a border-bottom and change the width of your h2 so that the border length matches your h2 length. Adjust the width to the width of your h2, taking into consideration it's font-size. Then add a padding-bottom to your h2 and set it to your liking.
<h2>Cats</h2>
h2{
border-bottom: 5px solid black;
font-size: 16px;
padding-bottom: 5px;
width: 64px;
}
I am currently trying to make a custom underline with border-bottom. However, currently the underline is going all the way of my block-element (whole page).
I’d prefer to have it being only 50px longer than my headline (however the text is flexible and I do not know the length).
Can I do this without adding another <span> tag within the <h2> somehow? I do not wannt to add a <span> element to each <h2> just to change my design.
Current HTML is:
<h1>My title</h1>
CSS:
h1 {
font-size: 18px;
color: #b62525;
border-bottom: 2px solid #c68181;
}
Is it possible to adjust the border-bottom length to my text length? (e.g. behave like inline element for border, but like block for newlines, padding and margin)
Using display: inline-block works, the only caveat being that the content after the <h1> tag must be the full width of the container element. The other solutions here also assume this. You can also use display: inline (supported by older browsers), but inline-block allows for setting of explicit widths, should you need it.
Here's a JSFiddle
CSS
h1
{
display: inline-block;
padding-right: 50px;
border-bottom: 1px dotted #888;
}
Inline or floating methods can be problematic if you're unable to compensate for them in other rules. One alternative is to use display:table
h1
{
display:table;
border-bottom:1px solid black;
padding-right:50px;
}
You can use
h1 {
font-size: 18px;
color: #b62525;
border-bottom: 2px solid #c68181;
float: left;
padding-right: 50px
}
Simply add one more property in css like this :
h1 {
display:inline;
font-size: 18px;
color: #b62525;
border-bottom: 2px solid #c68181;
}
How can I vertically centre an unknown quantity of text (may span multiple lines) in a div of known height. I know it can be done using the line-height property however this only works when there is only one line of text.
I think the only HTML that can automatically adjust text vertically is a table cell, so if you are using a div you can apply a little trick:
.align-vertically {
display: table-cell;
vertical-align: middle;
}
in this way you will change the default display behavior, to make the div acting like a cell!
I have actually found the answer to what I need myself.
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
}
.info {
color: #00529B;
background-color: #BDE5F8;
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
}
.error {
color: #D8000C;
background-color: #FFBABA;
}
The 'trick' so-to-speak is to not set a height for the div and just set padding/margins to do the centring.