Blogger, CSS, WordPress

CSS: How to Set Background Color to be the Same Width of Text

It was when I needed to highlight a line of text that I stumble upon a simple knowledge of CSS on how to set background color to be the same width of text in a line. It's more a matter of taste rather than a necessity, since one can just set background color with the same width of the text container.

Ini!: CSS: Bagaimana Cara Membuat Background Color Selebar Tulisan

Taste of design is one the most visible differentiators between blogs, although without quality content it won't help blog owners to attract visitors. Still, if the cost is not that high, it's always good to make continuous improvements to blog's design however small they are.

The cost that blog owners should not spend with regard to blog design is that if it will sacrifice the speed of page loading rather significantly. Speed is one of the important factors that should always be in mind whenever having temptation to make changes to the current blog setting.

CSS How to Set Background Color to be the Same Width of Text

The simplest way to highlight a phrase is just using CSS background-color code, such as

CSS:
.hightlight{background-color:#555;color:#fff;padding:5px}

HTML:
<div class="highlight">How to Set Background Color</div>

How to Set Background Color

But, as you can see, the background color fills the width of the whole row.

There are a couple of ways when using CSS to set background color to be the same width of text, not the whole length of a row. The simplest one is using <span> instead of <div>, such as

CSS:
.hightlight{background-color:#777;color:#fff;padding:5px}

HTML:
<span class="highlight">How to Set Background Color</span>

How to Set Background Color

Other option is using, display: table;

CSS:
h1{display:table;background-color:#999;color:#fff;padding:10px;font-size:1em}

HTML:
<h1>How to Set Background Color</h1>

How to Set Background Color


Another option is using display: inline-flex;

CSS:
.hightlight{display:inline-flex;background-color:#222;color:#fff;padding:7px;font-size:1.2em}

HTML:
<div class="highlight">How to Set Background Color</div>

How to Set Background Color


There are a couple of more ways on how to set background color to have the same width of text but most on them are rather impractical. However, you may want to find it yourself out here.

, seorang pejalan musiman dan penyuka sejarah. Penduduk Jakarta yang sedang tinggal di Cikarang Utara. Diperbarui: May 20, 2020.

Leave comments

Type it first, then click "Login ..." or "Posting".

« Newer©2021 FollowOlder »

Treat me for a cup of coffee, or just pray for those who make your life better.