This question already has answers here:
Line under text with spaces. Is it possible via html & css?
(5 answers)
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 8 years ago.
in CSS, how can i do something like:
---Item---
with the dash connected like a line?
i thought of :
border-bottom: 3px solid #000;
but then i can't move the line upward plus the line would be behind the text, not surrounding the text
my HTML
<ul>
<li class="sub-menu-item" >FACULTY&STAFF</li>
</ul>
(if possible, i would like to avoid touching the HTML)
is all the above possible via css or should i just use an image after all?
i'm aiming for ie8 and above(and all the new browsers of course)
Inject an — before and after your content using the CSS :before and :after selectors. You'll need to use the escaped unicode, as discussed here:
li.sub-menu-item:before, li.sub-menu-item:after {
content: "\2014"
}
See JSFiddle. For a shorter line you could use an ndash.
Here's a start:
.sub-menu-item
{
border-bottom:1px solid black;
height:0.6em;
width:200px;
text-align:center;
margin-bottom:1em;
}
.sub-menu-item > a
{
text-decoration:none;
background:white;
}
http://jsfiddle.net/NpP5F/3/ (updated to work with multiple items)
Tested to work in Firefox, IE and Chrome. Now keep in mind this works in isolation in a fiddle. Would probably require some tweaking to get it to work within other html elements and styles, etc. Proof of concept anyway. It "can" be done.
You can create a div with border-top and border-bottom, line-height: 0 with a span inside it that has a defined background color:
<div class="test">
<span>BLA BLA BLA </span>
</div>
And the CSS:
.test {
border-bottom: 1px solid #D7D7D7;
border-top: 1px solid #A1A1A1;
line-height: 0;
text-align: center; }
.test span {
background-color: #BABABA;
padding: 0 10px; }
In theory you could use the <hr/> and then just set the length of it and force it to display inline. Or use some special unicode characters if your encoding supports it.
Try this. :) It uses an image, which is a plus because it allows you to style your dashes however you want, and doesn't deal with any freaky margins or anything which may mess up the rest of your layout.
li.sub-menu-item
{
background-image: url('http://i.imgur.com/JIa6C.png'); /* Just a transparent PNG with a line in the middle */
}
li.sub-menu-item a
{
background-color: #FFF;
padding: 0 10px;
margin-left: 200px /* So you can see the left side of the line too */
}
http://jsfiddle.net/wAb8C
Without changing the code:
ul li{
position: relative;
border-bottom: 1px solid #000;
}
ul li a{
position: relative;
background: #fff;
left: 0;
bottom: -10px;
margin-left: 10px;
color: orange;
text-decoration: none;
}
Example here
Related
Im trying to implement some part of a page that needs some custom styled table (I know tables are a big no no for this but that is wat im doing so please try to only look at the question.)
The problem is that when I include Bootstrap the line gets destroyed. The easisest way to explain is by looking at this jsfiddle and then remove the bootstrap dependency.
The problem I think is in the following CSS:
td span {
background-color: #fff;
color: #000;
}
hr {
border: none;
color: blue;
background-color: blue;
height: 1px;
position: absolute;
display: block;
width: 100%;
z-index: -1;
}
This implementation is borrowing ideas from an earlier question.
Bootstrap applies a number of styles to elements directly- in your layout the (main) conflicting rule is line 159 of bootstrap-combined.min.css for hr elements:
hr {
margin:20px 0;
border:0;
border-top:1px solid #eeeeee;
border-bottom:1px solid #ffffff;
}
To rectify, add:
Demo Fiddle
hr{
margin:10px 0;
}
To your CSS. Note you may also want to change styling for a and table elements.
To see what styling Bootstrap applies to each element, use the DOM inspector in you browsers developer tools to step through into the element in questions and its CSS.
This question already has answers here:
Add centered text to the middle of a horizontal rule [duplicate]
(33 answers)
Closed 8 years ago.
How to add lines to the sides of text, create something like text separator but whithout background for text.
<h5>Some text goes here</h5>
In this post CSS challenge, can I do this without introducing more HTML? all solutions are with text background.
In my case text is on the image, so text background is awful.
Could this not be done even more minimally these days with the :before & :after selectors?
h5:before, h5:after{
content: '';
width: 2em;
height: 2px;
padding: 0;
margin-right: 5px;
background-color: #000000;
display: inline-block;
position: relative;
bottom: 3px;
}
h5:after{
margin-left: 5px;
margin-right: 0;
}
Here’s a fiddle: http://jsfiddle.net/3616he4y/2/
Your best solution is probably to add another element. You can't do this without that. You could try:
<h3><span>TEXT</span></h3>
h3 {
background-image: url(single-pixel-img.gif) 50% 50% repeat-x;
text-align: center;
padding: 0 20px;
}
h3 span {
background: #fff;
display: inline-block;
}
Then you can still add some padding to the span etc... The single line image could be a 1x1 black gif that'll add almost nothing to your pageload. It's simple, elegant and adds only a couple more lines of code.
to me, the pseudo elements here are very usefull once again and as the link to csstricks explains, it is not a big deal to set.
I'd rather use the static position , cause it can have some advantage once text breaks into a few lines.
Examples behavior/DEMO :
HTML
<h1>text & strikes</h1>
<h1>text <br/>& </br/>strikes</h1>
<h1><span>text <br/>& </br/>strikes</span></h1><!-- see demo to find out <span> purpose */
CSS
h1 {
text-align:center;
overflow:hidden;/* hide parts of pseudo jumping off the box */
text-shadow:0 0 1px white;/* increase visibility of text if bg is dark too */
background:url(http://lorempixel.com/100/600/abstract);
}
h1:before,
h1:after {
content:'';
display:inline-block;
height:0.06em;
width:100%;/* could be a little less*/
box-shadow:/* looks like text */
inset 0 0 0 20px,
0 0 1px white
;
vertical-align:middle;
}
h1:before {
margin-left:-100%;/* width is virtually reduce to zero from the left side to stick to text coming next */
margin-right:0.5em;
}
h1:after {
margin-right:-100%;/* width is virtually reduce to zero from the right side to stick to text */
margin-left:0.5em;
}
span {
display:inline-block;/* holds any line breaks */
vertical-align:middle;
}
Try <hr/>
FIDDLE DEMO
hr {
width:100px;
border:2px solid;
}
h5{
text-align:center;
}
You can use borders:
h5 {
border-right: 1px solid #dadada;
border-left: 1px solid #dadada;
}
If you want to have space between the lines and the text, you can add padding left and right to the styling:
h5 {
border-right: 1px solid #dadada;
border-left: 1px solid #dadada;
padding: 0 5px;
}
If you want to use the h5 as a nav item and you want to separate it from the rest of the items (the reason you need the divider) you can put the border only on the right, and every next item will inherit the settings.
For the last item, obviously you would want to remove the border right as it doesn't have anything after it, so you can do:
h5 {
border-right: 1px solid #dadada;
}
h5:last-child {
border-right: none;
}
I know about <s>, <del> and <strike> tags. These tags strike out a text once, however I want to strike out a text 2 times discontinuously. Can anyone please tell me how to do it? Thanks in advance.
The only (clean-ish) way I could think of (that doesn't involve additional elements being added) is to use the :after CSS pseudo-element:
del {
text-decoration: none;
position: relative;
}
del:after {
content: ' ';
font-size: inherit;
display: block;
position: absolute;
right: 0;
left: 0;
top: 40%;
bottom: 40%;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
JS Fiddle demo.
This is likely to to not work at all in Internet Explorer < 9 (but I don't have any IE with which I could test), but should be functional in up-to-date browsers. Checked in: Firefox 4.x, Chromium 12 and Opera 11 on Ubuntu 11.04.
A more reliable cross-browser method is to use a nested element (in this instance a span) within the del:
<del>This text has a (contrived) double strike-through</del>
Coupled with the CSS:
del {
text-decoration: none;
position: relative;
}
span {
position: absolute;
left: 0;
right: 0;
top: 45%;
bottom: 35%;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
JS Fiddle demo.
You can use the del tag with text-decoration-style: double for a double strikethrough.
<del style="text-decoration-style: double;">Text with double strike through <br/>
Multiline text also works.
</del>
To apply a double strikethrough on normal text inside a span or other tag, you can use text-decoration-line: line-through and text-decoration-style: double.
<span style="text-decoration-line: line-through; text-decoration-style: double;">
Text with double strikethrough
</span>
Both properties can be combined with the text-decoration shorthand.
<span style="text-decoration: line-through double;">
Text with double strikethrough
</span>
See also: text-decoration-style, text-decoration-line, text-decoration
I've used a background image for this purpose before.
Sample CSS:
.s2 {
background: url('dblstrike.gif');
background-repeat: repeat-x;
background-position: center left;
background-attachment: scroll;
}
Where dblstrike.gif is a repeatable image with two horizontal lines.
This only works under limited conditions, you would for example need different background images for different font-sizes.
Not that complicated with css:
.textDoubleStrikeThru {
text-decoration: line-through;
text-decoration-style: double;
}
Seems like this produces the strike-through positioned where the single strike-through is positioned and then adds a second strike-through beneath that.
A font-size independent CSS solution:
CSS:
del {
background: url('/images/Strike.gif') repeat-x left 0.72em;
}
See http://jsfiddle.net/NGLN/FtvCv/1/.
Strike.gif could be a 20x1 pixel image in the font color. Just reset background-image for del in containers with different text color.
You can do it... why you want two strike-throughs instead of one sounds like the demands of a pointy haired boss who "isn't crazy about the font". It is possible to hack in a solution.
Here is the html
This is my text with <span class="double-strike"><div class="the-lines"></div>
two lines through it</span> in a paragraph because of crazy weird
<span class="double-strike"><div class="the-lines"></div>requirements</span>
Now the CSS
span.double-strike {
position: relative;
}
span.double-strike div.the-lines {
position: absolute;
top: 10px; /* Depends on the font size */
left: 0;
border-top: 3px double black;
width: 100%;
height: 100%;
}
ALSO, make sure you are running in strict mode, or else you will have a few issues in IE.
Here's a jsfiddle of the example
You can't have more than one typographic strike through your text. At most you can have a strikethrough and an underline, but I have a feeling that's not what you're going for. A double strikethrough, though, is not possible with HTML or CSS's font properties alone.
Here another code, again with the known draw-backs: Additional code-requirements in the HTML (a span tag inside the del tag) and dependence on font size. This code has the advantages that it allows for multiple lines to have double line-through:
del.double-strike {
position: relative;
top: 20px; /*this depends on font size!*/
border-top: 3px double black; /*this is the actual "double line-through"*/
text-decoration:none; /*suppress normal line-through of del tag*/
}
del.double-strike span {
position: relative;
top: -20px; /*this must mach the above offset*/
}
try the following: it supports double strikeout cross lines and can be used in ordered list or unordered list.
Just quote the text with <del> then <span class='del'>. See below (I borrow the sample from previous post of Mach).
<p>This is my text with <del><span class='del'>two lines through it</span></del>
in a paragraph because of crazy weird requirements</p>
<div>This is my text with <del><span class='del'>two lines through it</span></del>
in a paragraph because of crazy weird requirements</div>
The CSS is as below:
del {
padding:0; margin:0;
position: relative;
text-decoration:none;
display: inline;
left: 0;
top: 0.8em;
border-top: 5px double red;
}
del > span.del {
padding:0; margin:0;
position: relative;
top: -0.8em;
left: 0;
width:100%;
color: black;
}
Is it possible to add padding before line-break? As in, making from this to this .
Current CSS code:
span.highlight { background: #0058be; color: #FFF; padding: 2px 5px; }
I had to add an extra margin-left:0; to make the two lines start at the same point.
This can be done with pure CSS. Create a solid box-shadow to the left and right of the highlight in the same color (and use margin to correct the spacing). For your case:
span.highlight {
background: #0058be;
color: #FFF;
box-shadow:5px 0 0 #0058be, -5px 0 0 #0058be;
padding: 2px 0;
margin:0 5px;
}
It took some tryouts, but here it is: the single- and multi-line highlighter with additional padding.
HTML:
<h3>Welcome to guubo.com, Gajus Kuizinas</h3>
<p><span>So far you have joined: </span><em>Networks guubo.com</em><ins></ins></p>
CSS:
h3 {
padding-left: 5px;
}
p {
background: #0058be;
position: relative;
padding: 0 5px;
line-height: 23px;
text-align: justify;
z-index: 0;
}
p span {
background: #fff;
padding: 2px 0 2px 5px;
position: relative;
left: -5px;
}
p em {
background-color: #0058be;
color: #fff;
padding: 2px 5px;
}
ins {
position: absolute;
width: 100%;
line-height: 23px;
height: 23px;
right: -5px;
bottom: 0;
background: #fff;
z-index: -1;
}
The trick is to style the whole paragraph with a blue background, and only put white background on top of that at the beginning and the end. Doing so assures blue background elsewhere...;)
Two main disadvantages:
The highlighted text has to start at the first line (but does not necessarily have to flow into a second),
The paragraph has to be aligned with justification.
Tested in Opera 11, Chrome 11, IE7, IE8, IE9, FF4 and Safari 5 with all DTD's.
See edit history for the previous less successful attempts.
You can achieve this using just box shadow, with no messy padding or margins.
The trick is to use box-shadow's spread option, and the padding on wrapped inline elements behaves as you expect.
.highlight {
background: black;
color: white;
box-shadow: 0 0 0 5px black;
}
display: block will achieve part of what you want, but of course it will make the span a block element, and so you won't get the wrapping behaviour seen in your example.
Your screenshot holds the clue to what you need to try and do: you need to impose a margin to the left and right on your "normal" paragraph text, and then have the span disregard this (and include its padding), to achieve an "overhang" of your blue highlight when compared to the rest of your text. You can't do that with straight CSS on your span, because it covers two lines and obviously "left" and "right" only refer to the span, and not the individual pieces of text contained therein.
Straight CSS isn't the answer here. You might want to take a look at this question, which uses a jQuery filter to grab the first word in an entity, etc.:
jQuery first word selector
Maybe you can use this technique.
http://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/
The closest thing, if it really matters that much I'd say is to add display: inline-block;
Problem
I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.
Requrements
I need to style a h3 tag to have an
underline/border after the content.
This h3 will be used multiple times
on the page, so the conent length can
vary
The solution needs to be
cross-browser (IE 6/7/8, FF 3, &
Safari)
Sample Code
<div class="a">
<div class="b"><!-- etc --></div>
<div class="c">
<h3>Sample Text To Have Line Afterwards</h3>
<ul><!-- etc --></ul>
<p class="d"><!-- etc --></p>
</div>
</div>
Sample Output
Sample Text to Have Line Afterwards ______________________________________
Another Example __________________________________________________________
And Yet Another Example __________________________________________________
Notes
I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags
I tried a background-image, but if it gave me problems if I gave it one with a large width
Using text-indent didn't see to give me the effect I was looking for
I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either
Any ideas would be much appreciated!
This will work if class 'c' is always the parent of the h3...
.c {
position: relative;
margin-top: 25px;
border-top: 1px solid #000;
padding: 0px;
}
h3 {
font-size:20px;
margin-top: 0px;
position: absolute;
top: -18px;
background: #fff;
}
It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.
try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?
.c {
background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
margin: 0;
padding: 0 0 2px 0;
float: left;
font-size: 20px;
background: #ffffff;
}
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
http://besh.dwich.cz/tmp/h3.html
H3 {
border: 1px solid red;
border-width: 0 0 1px 0;
text-indent: -60px;
}
You need to know the width of the text, but works pretty well.
The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:
h3#main-title { background: url(line.png) no-repeat bottom XYZem; }
where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.
this worked for me
div.c
{
background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
}
div.c h3
{
height:20px;background-color:white;display:inline;
}
you make the div the width of your content
then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image
Can you pad content in the UL tags? If so, this might work:
h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }
check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html
then again i have NO IDEA how to control the end of the line.
Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky
Imagine:
A long title that will wrap to two lines___________________
and leave you like this in great_llama's solution
and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.
Solution:
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))
Here's a better answer:
.c {
background: url('line.png') repeat-x 0 20px;
}
H3 {
background-color: white;
display: inline;
position: relative;
top: 1px;
}
Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.
h3:after {
content: '___________';
}