logo
down
shadow

CSS underline text with number below line


CSS underline text with number below line

By : user2955589
Date : November 22 2020, 10:40 AM
hope this fix your issue How can I underline text and add a small number underneath the underline like in this image using css, html, or javascript? , This is possible using :after :pseudo-element.
code :
div {
  font-size: 15px;
  width: 300px;
  line-height: 30px;
}
span {
  position: relative;
}
span:after {
  position: absolute;
  content: '2';
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  border-top: 1px solid black;
  text-align: center;
  font-size: 9px;
  line-height: 15px;
}
<div>over the <span>Triangle, a few months later,</span> another plane disappeared. A ship named the Sandra.</div>
div {
  font-size: 15px;
  width: 25%;
  line-height: 30px;
}
span {
  position: relative;
  white-space: pre;
}
span:after {
  position: absolute;
  content: '2';
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  border-top: 1px solid black;
  text-align: center;
  font-size: 9px;
  line-height: 15px;
}
<div>over the <span>Triangle, a few months later</span>, another plane disappeared. A ship named the Sandra.</div>
div {
  font-size: 15px;
  width: 50%;
  line-height: 30px;
}
span {
  position: relative;
  white-space: pre;
}
span:after {
  position: absolute;
  content: attr(data-num);
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  border-top: 1px solid black;
  text-align: center;
  font-size: 9px;
  line-height: 15px;
}
<div>over the <span data-num="2">Triangle, a few months later</span>, another plane disappeared. A ship named the Sandra.</div>


Share : facebook icon twitter icon
Is it possible to expressly set a line's height of text underlined using `text-decoration: underline;` in CSS?

Is it possible to expressly set a line's height of text underlined using `text-decoration: underline;` in CSS?


By : user2558003
Date : March 29 2020, 07:55 AM
around this issue easiest thing would be wrap it with an element and give it a bottom-border:1px solid;
that would make sure that the udnerline is 1 px in all browsers
Text with underline line in Raphael JS

Text with underline line in Raphael JS


By : Mirza Javad
Date : March 29 2020, 07:55 AM
wish helps you I want to make a simple thinge. Just a text with underline line like tag in html. How can i do it in Raphael JS? , Here is a function that should do what you're after:
code :
function underlineText(textElement) {
    var textBBox = textElement.getBBox();
var textUnderline = canvas.path("M"+textBBox.x+" "+(textBBox.y+textBBox.height)+"L"+(textBBox.x+textBBox.width)+" "+(textBBox.y+textBBox.height));  
}

var textElement = canvas.text(100,100,"hello world");
underlineText(textElement);
muti line text with first line underline in datagridviewTextBoxCell Vb.net

muti line text with first line underline in datagridviewTextBoxCell Vb.net


By : Dr. Midnight
Date : March 29 2020, 07:55 AM
will help you I'm answering my own question. Handle the DataGridView1_CellPainting and call this method for specific cell/column.firstly seperate the string and render it with TextRenderer class 2 times with new location.
I don't know is this correct way, but it works.
code :
Private Sub CellText_Underline(color As Color, e As DataGridViewCellPaintingEventArgs)

    Dim text As String = e.FormattedValue.ToString()

    Dim nameParts As String() = text.Split(" ")

    Dim topLeft As New Point(e.CellBounds.X, CInt(e.CellBounds.Y + (e.CellBounds.Height / 4)))

    Dim arialBold As New Font("Arial", 11, FontStyle.Regular Xor FontStyle.Underline)

    TextRenderer.DrawText(e.Graphics, nameParts(0), arialBold, topLeft, color)

    Dim topLeft_1 As New Point(e.CellBounds.X, CInt(e.CellBounds.Y + (e.CellBounds.Height / 4) + 5))
    Dim s As Size = TextRenderer.MeasureText(nameParts(0), arialBold)
    Dim p As New Point(topLeft_1.X, topLeft_1.Y + 12)

    Dim arialBold_1 As New Font("Arial", 11, FontStyle.Regular)
    TextRenderer.DrawText(e.Graphics, nameParts(1), arialBold_1, p, SystemColors.WindowText)
End Sub
How to make a line below text without text-decoration: underline?

How to make a line below text without text-decoration: underline?


By : flacer
Date : March 29 2020, 07:55 AM
Does that help I need to add a line below the text, without text-decoration: underline; otherwise how to make a custom space between text and line. , You can use Border-Bottom with some Padding-Bottom.
code :
a {
border-bottom: 1px solid black;
padding-bottom: 5px;
}
<a>Example Text</a>
a::after {
 display: block;
   content: '';
  width: 100%;
  height: 1px;
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
}

a {
position: relative;  
}
<a>Example Text</a>
vim remove underline from line number

vim remove underline from line number


By : user3243653
Date : March 29 2020, 07:55 AM
hope this fix your issue Latest versions defaults to underline: https://github.com/vim/vim/blob/017ba07fa2cdc578245618717229444fd50c470d/src/highlight.c#L256
code :
CursorLineNr term=bold cterm=underline ctermfg=Yellow gui=bold guifg=Yellow
hi CursorLineNr    term=bold ctermfg=012 gui=bold
hi CursorLineNr    term=bold cterm=bold ctermfg=012 gui=bold
Related Posts Related Posts :
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org