I'm applying the strikeout tag:
<s>$5,000,000</s>
But the line is too low.. .it's about 1/4 from the bottom rather than through the middle. Any way I can modify this so it goes a bit more through the middle?
You can't do it with the strike tag OR the text-decoration:line-through style. The line position is built-in. You could roll your own style for that, but it would be a huge PITA.
I've cooked up this code which gives you total control over strike-through position and style:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.mark {
border-bottom: 1px solid #000;
top: -9px; /* Tweak this and the other top in equal, but opposite values */
position: relative;
}
.offsetMark {
position: relative;
top: 9px; /* Tweak this and the other top in equal, but opposite values */
}
</style>
</head>
<body>
<div>
<p class="strikethrough">This is an <span class="mark"><span class="offsetMark">example</span></span> of how I'd do it.</p>
</div>
</body>
</html>
Eleven years later it is quite simple task:
s{
text-decoration: none;
position: relative;
}
s::before{
content: '';
width: 100%;
position: absolute;
right: 0;
top: calc( 50% - 1.5px );
border-bottom: 3px solid rgba(255,0,0,0.8);
}
old price: <s>$99.95</s>
Not with the strike tag, no. It's part of the rendering engine of the browser. For me (in Chrome) the line is rendered just above the middle.
This solution allows for padding, and uses the csss line-through property
It works for firefox, and chrome/ safari does it right anyway.
div.hbPrice span.linethroughOuter {
padding: 0 10px 0 0;
text-decoration: line-through;
position: relative;
}
div.hbPrice span.linethroughInner {
position: relative;
}
/* Firefox only. 1+ */
div.hbPrice span.linethroughOuter, x:-moz-any-link { bottom: 2px; }
div.hbPrice span.linethroughInner, x:-moz-any-link { top: 2px; }
and the mark up is something like...
<div class="hbPrice"><span class="linethroughOuter"><span class="linethroughInner">£1,998</span></span> £999</div>
The other solution is to add a background image of a line, and make it the same colour as the text.
2021 Solution
Normally, you would use text-decoration: line-through, but you currently can't change the position of a "line-through" line.
But fortunately, you can change the position of an "underline" thanks to the new CSS property text-decoration-offset.
Here is how it works:
.strike {
text-decoration: underline;
text-underline-offset: -.4em;
}
<p>Only <span class="strike">$199.99</span> $99.99!</p>
Although you may notice that the line seems a bit choppy. That's due to the relatively-new text-decoration-skip-ink which tries to hide the underline in places where it would overwrite the text. It's great for underlining, but fails as a strikethrough.
Luckily, we can turn that feature off, and along with some additional nice color and thickness properties, here's the final result:
.strike {
text-decoration: underline;
text-underline-offset: -.4em;
text-decoration-skip-ink: none;
text-decoration-color: red;
text-decoration-thickness: 2px;
color: gray;
}
<p>Only <span class="strike">$199.99</span> $99.99!</p>
Browser support is widespread with the current exception of Safari.
You could do something like this:
<div class="heading"><span>Test heading</span></div>
.heading {
position: relative;
text-align:center;
}
.heading:before {
background-color: #000000;
content: "";
height: 1px;
left: 0;
position: absolute;
right: 0;
top: 50%;
}
.heading span {
background-color: #fff;
display: inline-block;
padding: 0 2px;
position: relative;
text-align: center;
}
http://codepen.io/anon/pen/cLBls
Related
I have a list of links on the left hand side of the page.
I would like to improve this list so that when I put the cursor over an item in this list, some sort of label appears which gives a brief description about what the link is pointing to. The html in question is generated automatically using Antora from AsciiDoc sources and, as far as I can see, all I am able to do is to add a css class or id for the different parts of the link text which are in bold. I cannot add any Javascript or nested css classes.
So here is my attempt:
<!DOCTYPE html>
<html>
<head>
<style>
#Bob.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
#Bob.tooltiptext {
font-size: 5px;
}
#Bob.tooltiptext:hover {
visibility: visible;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
font-size: 10px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
</style>
<title>Page Title</title>
</head>
<body>
<a href="http://www.bob.com" class="searchEngineLink" >
<strong id="Bob" class="tooltip">Bob</strong>
<strong id="Bob" class="tooltiptext">What a great guy!</strong>
</a>
</body>
</html>
This does not achieve what I want obviously. All it does is have one bit of text in a small font that, when I roll over it, increases into a larger font in a kind of box.
If anyone can think of some way to have a label pop up over some link in a page, even using some completely different approach that I have not thought of, I would be grateful. Note that I will have about 200 links so if I can have a solution that does not require me to have a set of css properties for every different id for each link, that would be preferable.
If any of the this question is not clear, please feel free to ask me.
Simple tooltip can be achieved by usi title attribute: The information is shown as a tooltip text when the mouse moves over the element.
<a href="http://www.bob.com" class="searchEngineLink" title="What a great guy!">
<strong id="Bob" class="tooltip">Bob</strong>
</a>
You can also make your own custom tooltip, by using content property to insert generated content. (description of each link).
.searchEngineLink {
display: inline;
position: relative;
}
.searchEngineLink:hover:after {
background: #eee;
border-radius: 5px;
bottom: -34px;
color: black;
content: attr(gloss);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: auto;
white-space:nowrap;
}
.searchEngineLink:hover:before {
border: solid;
border-color: #ddd transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 40%;
position: absolute;
z-index: 99;
}
<a class="searchEngineLink" gloss="What a great guy" href="http://www.bob.com">Bob</a>
<a class="searchEngineLink" gloss="What a smart guy" href="http://www.bob.com">Bob2</a>
<br>
<a class="searchEngineLink" gloss="What a handsome guy" href="http://www.bob.com">Bob3</a>
I have an issue creating a title for a web page.
Here is title:
<!DOCTYPE html>
<html>
<head>
<style>
.title {
border-top: 2px solid grey;
color: grey;
text-size:20px;
}
</style>
</head>
<body>
<div class="title">Düsseldorf markets</div>
</body>
</html>
I need to move the market word to the bottom and it should be displayed like that:
Düsseldorf
markets
Any idea how can I do it with the help of CSS only(i.e how can I change title CSS class to get desired view)?
You can use a CSS hack to acheive this if you really want to use CSS only. First, make the text disappear by setting it to the color of the background. Then use the before and after selectors to rerender the content.
However, easier would be to use span tags in your HTML, then make each of them have display: block to get a line break.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--font_size: 20px;
--text_col: grey;
--text_margin: 10px;
}
.title {
border-top: 2px solid grey;
font-size: var(--font_size);
color: white;
}
.title:before {
content: "Düsseldorf";
color: var(--text_col);
position: absolute;
left: 10px;
top: var(--text_margin);
}
.title:after {
content: "markets";
color: var(--text_col);
position: absolute;
left: 10px;
top: calc(var(--font_size) + var(--text_margin));
}
</style>
</head>
<body>
<div class="title">Düsseldorf markets</div>
</body>
</html>
You can use padding-right with calculation. padding-right: calc(100% - 10ch); This is very simple, no complex.
.title {
border-top: 2px solid grey;
color: grey;
font-size: 20px;
padding-right: calc(100% - 10ch); /* Düsseldorf is 10 character */
box-sizing: border-box;
}
<div class="title">Düsseldorf markets</div>
A simple way to approach this - use a width property on a element. Then, by word-break rule (which is 'normal' by default and you don't need to specify this) words will be auto-wrap on next line, when there is no free place on container
here is demo
P.S. And you have a typo - did you mean font-size except for text-size?
I'm trying to make a basic FAQ of sorts using a simple click on element to reveal the answer to the FAQ. Spoiler..
I have found a really handy piece of coding, but everything I try I cannot prevent the mouse hover from making the answer disappear.
I need the answer to remain on the page until the user is ready to click the next FAQ.
I hope someone can help, thank you very much.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p><b>This is an FAQ</b><br />
<p>This is also FAQ click below for the answer</p>
<div class=spoiler><div>
My hidden text
</div></div>
</body>
</html>
.spoiler { display: relative; cursor: pointer; margin-bottom: 10px; margin-top: 10px; }
.spoiler:before { content: "Answer:"; position:absolute; cursor: pointer; font-weight: bold; color: #2C3635; }
.spoiler > div { cursor: default; top: 0px; display: none; position: relative; right: 10px; top: 20px; border: #A6B2A6 1px solid; background: darkgrey; padding: 0px 10px 15px 10px; border-radius: 4px; }
.spoiler > div:before { content: ""; display: block; width: 100%; height: 20px; margin-top: -20px; }
.spoiler:active > div { display: block; }
.spoiler > div:hover { display: block; }
https://jsfiddle.net/g9b3ugzh/
The HTML details and summary elements are perfect for this. The basics without any CSS required are as follows:
<details>
<summary>Answer:</summary>
<p>My hidden text</p>
</details>
JSFiddle demo
You could give the code, it is a JavaScript solution, in the JSFiddle a go.
var spoiler = document.getElementsByClassName('spoiler');
var showSpoiler = function() {
this.classList.add("show-spoiler");
}
for (var i = 0; i < spoiler.length; i++) {
spoiler[i].addEventListener("mouseover", showSpoiler);
}
Had to disable and amend some CSS too though, to make it work:
Took off position: absolute; from .spoiler:before
Took off top declarations from .spoiler > div
Removed the :hover and :active states on .spoiler
I would like to have a colored underline that looks like this when it breaks:
text-decoration-color seems to be not supported widely enough.
I tried this:
.underline {
position: relative;
}
.underline:after {
position: absolute;
content: '';
height: 1px;
background-color: #ffc04d;
bottom: .1rem;
right: 0;
left: 0;
z-index: -1;
}
<h1><span class="underline">Sprouted Bread</span></h1>
What about a linear-gradient where it will be easy to control color, size and distance within a single element:
.underline {
position: relative;
font-size:28px;
background:
linear-gradient(yellow,yellow) /* Color */
left 0 bottom 2px/ /* Position */
100% 2px /* Size (width height)*/
no-repeat;
}
<div style="width:150px;text-align:center"><span class="underline">Sprouted Bread</span></div>
As a side note, border-bottom works fine used with inline element but of course you cannot easily control the distance to make it behave as a text-decoration:
.underline {
position: relative;
font-size:28px;
border-bottom:2px solid yellow;
}
<div style="width:150px;text-align:center"><span class="underline">Sprouted Bread</span></div>
Try this JSFiddle
By wrapping the elements like you have in a span. You can put the text decoration on the parent element and the text color on the span.
HTML:
<h1><span class="underline">Some Text</span></h1>
CSS:
h1 {
text-decoration: underline;
color: red;
}
.underline {
color: blue;
}
Just add a border!
Using display: inline, add a bottom border and space it with padding.
You could also use line-height and then place negative margins to increase the space in between the lines.
And...you could also animate it!
.underline {
position: relative;
padding-bottom: 1px;
border-bottom: 1px solid #ffc04d;
}
<h1 style="width: 5em">
<span class="underline">Sprouted Bread</span>
</h1>
As mentioned by #chriskirknielsen, you could use box-decoration-break, although not supported by IE or Edge. Credits: #Temani Afif
How can I add an underline to an inline-element in CSS, that is (1.) "stylable" and (2.) at the baseline (unlike solutions using only border-bottom or box-shadow)?
This is for a responsive layout, so the underline has to be able to reach over multiple lines. Also, it cannot displace any other (not underlines) text that might be inline with the link.
This is a mock-up to demonstrate the desired effect.
Thanks in advance!
I think you'd want to use a pseudo element to style your underline. I threw a simple animation too on hover to showcase its flexibility.
h1 {
position: relative;
}
h1::before {
content: "";
position: absolute;
left: 0;
bottom: 5px;
z-index: -1;
background: aqua;
height: 2px;
width: 200px;
transition: width 0.3s;
}
h1:hover::before {
width: 300px;
}
<h1>This is a styleable baseline</h1>
I don't know why you aren't able to use border-bottom but try this:
<!DOCTYPE html>
<html>
<style>
</style>
<body>
<a><u>LINK OVER </u><br><u>MULTIPLE</u> LINES</a><br><br>
<a><span style="border-bottom: blue solid 3px;">LINK OVER
<br>MULTIPLE</span> LINES</a><br><br>
<a><span style="text-decoration: underline; text-decoration-color:
blue;">LINK OVER<br>MULTIPLE </span> LINES</a>
</body>
</html>
For everyone interested, this is the solution I came up with. It only works on a solid background.
background: linear-gradient(white, white), linear-gradient(blue, blue);
background-position: 0px calc(1em + 5px), 0px 1em;
background-repeat: repeat-x;
color: black;
background-color: white;