WordPress网站标题与描述间长分隔线实现方法咨询

Hey there! Since you're new to coding and working with WordPress, let's break down how to add that clean long separator between your site title and tagline—super doable with a few simple approaches, depending on your theme setup.

Option 1: Check Your Theme's Built-in Settings #

First, let's see if your theme makes this easy without any code:

• Log into your WordPress dashboard, head to Appearance > Customize
• Look for a section like Site Identity (the name varies by theme, but it's where you set your site title and tagline)
• Scan for options like "Add separator between title and tagline" or style controls for spacing/borders. Many modern themes (like the default Twenty Twenty-* series) include these quick settings to save you time.

Option 2: Custom CSS (Most Flexible for Any Theme) #

If your theme doesn't have built-in options, custom CSS is your go-to. It's simpler than it sounds—here's how:

1. Go to Appearance > Customize > Additional CSS (this panel is available in almost all WordPress themes)
2. Use one of these code snippets, depending on the look you want:

Snippet 1: Bottom Border on the Site Title #

This adds a line directly below your title, separating it from the tagline:

/* Adjust the values to match your site's style */
.site-title {
  border-bottom: 2px solid #2d2d2d; /* Change #2d2d2d to your preferred color */
  padding-bottom: 12px; /* Space between title text and the line */
  margin-bottom: 12px; /* Space between the line and your tagline */
}

Snippet 2: Centered Partial Width Line (More Stylish) #

If you don't want the line to span the full width of the title area, use a pseudo-element to add a centered, shorter line:

.site-title::after {
  content: "";
  display: block;
  width: 70%; /* Adjust this to make the line longer/shorter */
  height: 2px;
  background-color: #2d2d2d;
  margin: 12px auto; /* Centers the line and adds vertical spacing */
}

Pro Tip for Newbies: If .site-title doesn't work for your theme, right-click your site title on the front end, select "Inspect" (browser dev tools), and look for the class name assigned to the title element. Replace .site-title with that class in the code.

Option 3: Block Editor (For Custom Header Templates) #

If you're using WordPress's full site editing (FSE) with block themes:

• Go to Appearance > Editor
• Navigate to your header template (click the site name in the top left, then select "Templates > Header")
• Click between your site title and tagline blocks, then search for and add the Separator block
• Use the block settings sidebar to adjust the line's color, width, style (solid/dashed), and spacing.

That's all! Start with the theme settings first if you can, then move to CSS or the block editor if you need more control.

内容的提问来源于stack exchange，提问作者frank.underwood