Report Blog Entry
hi, i'd like to share a trick to alter text content via css.
this allows you to edit the text inside of headings on your profile.
the idea is to insert new text content using the :before pseudo-element and hide the original text content.
i chose to hide the original text content by setting font-size: 0;.
there may be other methods. please share your method in the comments.
i'll share some examples for different profile elements.
one downside with using this trick is that the altered text becomes unselectable.
Blurbs
/* Blurbs Heading */
.blurbs > .heading > h4 { font-size: 0; }
.blurbs > .heading > h4:before {
content: "blurbs";
font-size: 2rem;
}
/* Blurbs Sections */
.blurbs .section > h4 { font-size: 0; }
.blurbs .section:nth-child(1) > h4:before {
content: "about me";
font-size: 2rem;
}
.blurbs .section:nth-child(2) > h4:before {
content: "looking for";
font-size: 2rem;
}
Before
After
Friends
.friends:not(#comments) > .heading > h4 { font-size: 0; }
.friends:not(#comments) > .heading > h4:before {
content: "friends";
font-size: 2rem;
}
Before
After
Comments
.friends#comments > .heading > h4 { font-size: 0; }
.friends#comments > .heading > h4:before {
content: "comments";
font-size: 2rem;
}
Before
After
Comments
Displaying 0 of 0 comments ( View all | Add Comment )