Hide All Text Except for The First Letter with CSS

Hide all text except for the first letter with CSS?

You can, but your CSS is wrong. The version below works (at least in Chrome). It makes the dt invisible, and defines an overrule for the first letter to make it visible again.

I tried the same with display too, but that doesn't work, as expected. visibility: hidden hides the content, but keeps the element in place, while display: none removes it from the flow, and makes it impossible for sub-elements (the first letter in this case) to become visible again.

I added a hover too, so you can hover the letter to see the rest of the dt.

dt {  visibility: hidden;}dt::first-letter {  visibility: visible;}
/* Hover the first letter to see the rest */dt:hover {  visibility: visible;}

Hover to see the rest:<dt>Lorum ipsum is a weird text</dt><dt>Foo bar</dt>

Remove underline from ::first-letter

From https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration:

Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can't remove the decoration.

(emphasis mine). Of course, in your case you don't have a true child element (merely a first-letter pseudo-element), but the same logic applies.

That said, some experimentation suggests a child element can add its own underline (covering up the ancestor's), and then specify the color of that underline using the text-decoration-color. So you could potentially hack together your desired visual effect, in most cases, by writing something like

.letter-underline-none::first-letter {
  text-decoration: underline;
  text-decoration-color: #FFF;
}

(adjusting the #FFF part to match the intended background color). I don't think I'd recommend that, though — it seems too likely to have weird edge cases that look worse than the all-underline effect to begin with.

Hide first x characters

Like others have said, it's not possible to exactly what you want. But just for fun, if it's always "Data: " that you're trying to hide, you could do this:

h4 {    position: relative;    background-color: white;}
h4:before {    content: "Data: ";    position: absolute;    top: 0;    left: 0;    background-color: white;    color: white;}

<h4>Data: This is some random data</h4>

CSS: Display only the first two letters of a string

Actually, there is a way to do this in pure css!
It uses the ch font-dependent unit.

.two_chars{  font-family: monospace;  width: 2ch;  overflow: hidden;  white-space: nowrap;}
.large{  font-size: 2em;}

<div class="two_chars">  Some long text.</div><div class="two_chars large">  Even longer text.</div>

Remove/hide text with css

Actually, there is a way to do this in pure css! It uses the ch font-dependent unit.

.remove-letters {
font-family: monospace;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display:block;
text-indent: -2ch;
font-size: 2em;
}

<html>
<body>
<p class="remove-letters">yrHello There!</p>
</body>
</html>

How do I select text except for the first letter?

:not can only be applied to simple selectors. Pseudo-elements aren't simple selectors, so you can't invert them.

You could apply the "non-first letter" styles to all of the text and reverse them for the first letter.

For example:

p {  color: red;  text-transform: uppercase;}
p::first-letter {  color: black;  text-transform: none;}

<p>red capitals except the first letter.</p>

Hide text using css

This is one way:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

CSS How can I offset the first letter without negative margin?

You may use pseudo-element to have that letter as an element that you can style alone:

p {  margin: 50px;  position: relative;}
p::first-letter {  opacity: 0;}
p::before {  content: attr(data-lettre);  display: inline-block;  position: absolute;  margin-left: -20px;  margin-top: -20px;  font-size: 30px;  font-weight: bold;  font-family:arial;}

<p data-lettre="L">  Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume</p>

How to hide all div except the first?

The issue is that gt(0) is not a function. Presumably you meant get(0) but even that has issues as it will return a DOM Element which doesn't have a hide() method.

To achieve what you need, you can use the :gt selector to get all divs but the first and hide them:

$('div.ref_display:gt(0)').hide();

That being said you don't need JS/jQuery for this at all as it can be achieved in CSS alone:

div.ref { display: none; }div.ref:first-child { display: block; }

<div class="col-md-6 ref">1</div><div class="col-md-6 ref">2</div><div class="col-md-6 ref">3</div>

Display first letter only

Edit: Disclaimer: this does not work according to comments. Please don't use as-is without checking it fits your needs.

If you check the specification for the :first-letter pseudo-element, you'll notice the following:

The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

The important word here is "block."

You are trying to use the pseudo-element on an <a/> tag with class of Twitter. By default, anchor tags are inline elements (not block level elements).

For your given markup, one solution to your problem would be to style the anchor this way:

.Twitter {
    display:block;
    visibility:hidden;
}

.Twitter:first-letter {
    visibility:visible;
}

I'm not sure exactly what you are going for, but that is good enough for experimental purposes. Check out a demo here: http://jsfiddle.net/H7jhF/.

Hide All Text Except for The First Letter with CSS