I would like to create a double line-through in IE11, but I'm having some trouble. It seems that the text-decoration is limited in IE11. Currently I'm using a single line, but since we will use some kanji it may be confused as part of the kanji itself: a double line would be better.
*.strike {
text-decoration: line-through;
}
How can I achieve it?
Use a positioned pseudo-element
span.double-strike {
position: relative;
}
span.double-strike:after {
content: '';
position: absolute;
top: 50%;
height: 1px;
left: 0;
border-top: 1px solid green;
border-bottom: 1px solid red;
width: 100%;
}
<span>
This is my text with <span class="double-strike">
two lines through it</span> in a paragraph because of crazy weird
<span class="double-strike">requirements</span>
</span>
Note with this option each strike can have a different color...as an added bonus.
IE11 does not natively support this...
However there is a potential hacky option... you can always do something like this...
Set a span around the text you wish to apply a double strike through on and then absolutely position the strike through on top of the text.
Found an example on JS Fiddle that shows you what I'm talking about.
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%;
}
https://jsfiddle.net/cmcculloh/Ud5L4/
Related
I tried to make an under-line dotted under word to mark it as user provided information.
It is fine to use a pre-defined html under-line tag <u>..</u> with styling dotted or style border-bottom. However, it is a little bit problem with printing (the dotted not showing correctly); Therefore I decided to use dotted symbols ... instead because it is showing correct and precise.
By that way, I tried to make the word takes place of dotted points' spaces, and dotted point would stay a little bit lower from it current position under the word.
To make it clear, it would look like this:
My HTML Code do to this is like so:
.dotted:before{
content: '..................';
position: absolute;
top: 20px;
}
<p>Name: <span class="dotted">Jonh David</span></p>
However, as the information provided by user is varied, I cannot determined how many dotted points I would need to fit those information correctly.
Your tip is very much appreciated. Thanks.
Can use border-bottom-style css property
.dotted {
border-bottom: 1px solid #000;
border-bottom-style: dotted;
}
https://jsfiddle.net/j965444n/
I found this really cool site for doing this. Refer the site below.
Styling Underlines
You can play around with the properties and get the desired thickness and padding, also this is not dependent on setting the width based on the content size!
Check my below example of how this is done!
.dotted {
background-image: linear-gradient(to right, #000000 50%, transparent 50%);
background-position: 0px 100%;
background-repeat: repeat-x;
background-size: 4px 2px;
padding: 0px 3px;
}
<p>Name: <span class="dotted">Jonh David</span></p>
I think it's something like this:
#myDIV {
text-decoration: underline;
text-decoration-style:dotted;}
w3schools underline
Note: The text-decoration-style is only supported by Firefox.
If a simple dotted border isn't good enough for you and say you want to control the spacing between the dots - you could make your technique work by setting overflow:hidden on the parent element.
.dotted {
position: relative;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
}
.dotted:before {
content: '...............................';
position: absolute;
top: 4px;
width: 100%;
letter-spacing: 2px; /* adjust to control spacing between dots */
}
<p>Name: <span class="dotted">Jonh David</span></p>
<p>Name: <span class="dotted">Jo</span></p>
<p>Name: <span class="dotted">Jonh David blabla</span></p>
I wonder what is the problem with underline or you could try border-bottom: 1px dotted #444 but whatever, here's your method - a span with dotted :pseudo - which takes into account the length of the element.
content is a lot of … (use dots if you wish)
it's cropped with overflow: hidden
test cases with 2 very different lengths
3rd example is good ole dotted border (works since IE7)
.dotted {
position: relative;
}
.dotted:before{
content: '…………………………………………………………………………………………';
display: block;
position: absolute;
top: 3px;
left: 0; right: 0;
overflow: hidden;
}
.other-dots {
border-bottom: 1px dotted black;
}
<p>Name: <span class="dotted">Jonh David</span></p>
<p>Name: <span class="dotted">Maria-Magdalena von Stroheim de la Peña</span></p>
<p>Name: <span class="other-dots">Other way with bd-bottom</span></p>
I think #Christopher Marshall's idea is gonna make the same effect on printed page, so here is an example with background : https://codepen.io/Pauloscorps/pen/YrwWYo
HTML
<p>My name is : <span>John David</span></p>
CSS :
p {
span {
display:inline-block;
font-weight:bold;
&:after {
content:"";
display:block;
width:100%;
height:1px;
background:red url('https://img11.hostingpics.net/pics/194508dot.jpg') repeat center bottom;;
}
}
}
I use bottom-border on some a element, and I want to add some horizontal offset to the border.
What I have now:
Link very cool name
-------------------
What I want:
Link very cool name
----------------
How can I archive this? Only using an a element.
A pseudo-element is ideal here which can be styled in any fashion you want, color, width & height...even position below the link text.
a {
position: relative;
text-decoration: none;
}
a::after {
content: "";
position: absolute;
top: 100%;
right: 0;
width: 75%;
height: 2px;
background: orange;
}
Long stretch of text
You can try this:
a{
text-decoration: none;
display:inline-block;
}
a:after{
content: "";
border-bottom: dotted 2px red;
width: 70%;
float: right;
padding-top: 5px;
}
https://jsfiddle.net/9xc0x58c/1/
You could use a pseudo element ie :after element for this and abs pos it, 1px high background colour and width of you chosen link length etc.
Would that be the required result? Not sure the requirement as to why you would want this but it should achieve the required result.
you can use span
HTML
Link <span class="un">very cool name</span>
CSS
.un{
border-bottom: dotted 2px red;
}
This question already has answers here:
How to change the strike-out / line-through thickness in CSS?
(11 answers)
Closed 8 years ago.
Yesterday with one friend discuss for change height of line about strike-through.
Today searching on documentation of CSS says :
The HTML Strikethrough Element (<s>) renders text with a strikethrough, or a line through it.
Use the <s> element to represent things that are no longer relevant or no longer accurate.
However, <s> is not appropriate when indicating document edits;
for that, use the <del> and <ins> elements, as appropriate.
And seems that <s> accept all reference of CSS but not function on height.
CSS:
s {
color: red;
height: 120px
}
HTML:
<br /><br />
<s >Strikethrough</s>
There is a simpler demo on JSFIDDLE and you see that not change the height of line....
There is a alternative solution or I wrong on CSS?
EXPLAIN WITH IMAGE
I think the best way to handle this is to use a pseudo element to simulate the desired behavior.
s {
color: red;
display: inline-block;
text-decoration: none;
position: relative;
}
s:after {
content: '';
display: block;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
border-bottom: 3px solid;
}
The border inherits text-color and you gain full control over your styling, including hover effects.
JS Fiddle here
I've wanted to do this before and came up with this:
<span class="strike">
<span class="through"></span>
Strikethrough
</span>
and:
.strike {
position:relative;
color:red;
}
.strike .through {
position:absolute;
left:0;
width:100%;
height:1px;
background: red;
/* position of strike through */
top:50%;
}
JS Fiddle here
and if you want multiple strike throughs you can use something like this:
JS Fiddle - multi strikes
This is my alternative version.
s {
color: red;
position: relative;
text-decoration: none;
}
s:after {
position: absolute;
left: 0;
right: 0;
top: -10px;
content: " ";
background: red;
height: 1px;
}
JSFiddle demo
Try this
s {
color: red;
text-decoration: none;
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 12px,transparent 9px);
height: 100px
}
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;
}
I'm trying to remove dots in a textarea which are present at the bottom-right corner.
Here's an example of what I mean (from Chrome):
How to remove those diagonal lines?
Just add in your CSS file
textarea { resize: none; }
Later (2019) edit:
Related to this answer of mine and the rising number of GitHub code search results on resize: none declarations applied to textarea elements, I wrote some lines on why I think CSS resize none on textarea is bad for UX:
Very often, the textarea is limited to a number of rows and columns or it has fixed width and height defined via CSS. Based solely on my own experience, while answering to forums, writing contact forms on websites, filling live chat popups or even private messaging on Twitter this is very frustrating.
Sometimes you need to type a long reply that consists of many paragraphs and wrapping that text within a tiny textarea box makes it hard to understand and to follow as you type. There were many times when I had to write that text within Notepad++ for example and then just paste the whole reply in that small textarea. I admit I also opened the DevTools to override the resize: none declaration but that’s not really a productive way to do things.
from https://catalin.red/css-resize-none-is-bad-for-ux/
So you might want to check this out before adding the above to your stylesheets.
It is as simple as the following code. Just give the textarea the style resize: none
<textarea style="resize: none"></textarea>
html
sass
textarea {
position: relative;
z-index: 1;
min-width: 1141px;
min-height: 58px;
}
.resizer {
position: relative;
display: inline-block;
&:after {
content: "";
border-top: 8px solid #1c87c7;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
-webkit-transform: rotate(-45deg);
z-index: 1;
opacity: 0.5;
position: absolute;
bottom: 1px;
right: -3px;
pointer-events: none;
}
}
.arrow-resizer-textarea {
height: 0;
width: 0;
border-top: 8px solid #1c87c7;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
-webkit-transform: rotate(-45deg);
position: absolute;
bottom: 1px;
right: -3px;
pointer-events: none;
z-index: 2;
}