Скачать или смотреть Create a Custom Underline for Your Headers in CKEditor

Learn how to add a stylish and responsive bottom border to your headers in CKEditor that enhances your website’s look without compromising its mobile design.
---
This video is based on the question https://stackoverflow.com/q/74059768/ asked by the user 'Michael Henson' ( https://stackoverflow.com/u/20233846/ ) and on the answer https://stackoverflow.com/a/74067246/ provided by the user 'Rob' ( https://stackoverflow.com/u/162698/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Markdown Border bottom for underline

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Add a Stylish Underline Under Headers in CKEditor

If you’ve been working with CKEditor and want to add a bottom border or a text decoration underline to your headers that extends slightly beyond the text on both sides, you might have run into some challenges. Specifically, the default methods can cause issues with mobile responsiveness, making your headers look less than ideal on smaller screens. In this guide, we'll explore a simple and effective solution to achieve a beautifully styled header while ensuring that it remains mobile-friendly.

The Problem

The traditional approach to underline a header using margins can lead to display problems on mobile devices. For instance, consider the following code:

[[See Video to Reveal this Text or Code Snippet]]

While this method seems straightforward, it breaks down when viewed on mobile. The margins applied here can throw off the alignment, causing the header to appear misaligned or excessively spaced, which disrupts the overall aesthetics of your webpage.

The Solution

To achieve a more appealing and responsive design for your header underline, you’ll want to make a few adjustments to your code. Here's how you can do it step-by-step:

Step 1: Remove Margins and Text Align

First, eliminate the margins as well as the text alignment setting. This allows us to create a more streamlined design.

Step 2: Set Width and Center with Auto Margins

Next, instead of margins on the left and right sides, you should define a specific width for your header and center it using margin: 0 auto;. This technique keeps the header centered while providing enough space on both sides for the underline effect you’re aiming for.

Updated Code Example

Here’s the updated code snippet you should use:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

border-bottom: This property creates the bottom border effect, which can be styled with different colors and thickness (in this case, .5px solid red).

width: 20%: Sets the width of the header to 20% of the parent container, meaning the underline will extend beyond the text but won't stretch all the way across the block.

margin: 0 auto;: This CSS trick automatically adjusts the left and right margins, centering the header within its parent container.

Conclusion

By following these steps, you can craft a header in CKEditor that features a stylish underline effect without sacrificing mobile responsiveness. This approach not only looks good on different screens but also enhances the overall design of your webpage.

Try It Yourself!

Feel free to apply this method to your CKEditor, adjust the width and border style as desired, and see how it transforms your headers! With just a few tweaks, you can achieve an elegant look that’s both functional and visually appealing.