What Are Fully Customizable Before After Comparison Labels

Imagine you’re a skincare clinic that just published a before/after slider showing a patient’s 12-week treatment results. The images are stunning. The transformation is clear. But the labels? They just say “Before” and “After.”

No timeline. No treatment name. No clinical context. Just two generic words that could belong to anyone, anywhere, for anything.

That disconnect is more common than it should be, and it quietly undermines the credibility of some genuinely impressive work. Whether you’re a photographer showcasing a color grade, a real estate agent revealing a staged property, or a product brand demonstrating real results, your labels are doing communication work that the images alone cannot do.

This guide covers everything: what comparison labels actually are, why the defaults fail, the full anatomy of label customization, real-world examples by industry, and how to set them up in WordPress without touching a line of code.

What Are Fully Customizable Before After Comparison Labels?

Fully customizable before after comparison labels are the text overlays displayed on each side of an image comparison slider, typically reading “Before” and “After”, that can be edited, repositioned, restyled, and configured to match your brand, content, and audience. Full customization includes control over label text, color, font, size, position, background, and visibility behavior.

Think of them as the caption layer of your slider. They sit on top of each image and tell the viewer what they’re looking at, not just that something changed, but how it changed, when, or why. When those labels are locked to generic defaults, you lose that layer of meaning entirely.

The Anatomy of a Before After Comparison Label

A comparison label is a distinct UI element. It is not the slider handle, not the divider line, and not the image itself, it lives above all of those, as a styled text overlay anchored to one side of the comparison.

Every label is made up of the same core visual components:

• Label text: the actual words displayed
• Label background: the color or transparency behind the text
• Label position: where on the image the label appears
• Font style: typeface, weight, and size
• Visibility state: whether the label is always shown or triggered by interaction

Understanding each component separately is important because they can often be customized independently. Changing the text doesn’t have to change the background color. Adjusting the position doesn’t have to affect font size. Full customization means controlling each of these levers on its own.

Where Labels Appear on a Comparison Slider

Labels can be anchored to several positions: top-left, top-right, bottom-left, bottom-right, centered over the image, or edge-anchored near the divider line. Most plugins offer positional presets rather than pixel-level control, which is usually enough for practical use.

One thing worth thinking about: label position interacts with the slider’s default divider position. If your slider rests at a 50/50 split, a label anchored close to the center can feel visually crowded. Placing labels in the outer corners of each image tends to keep things clean.

Label Visibility Behavior, Always On vs. Hover State

Some sliders show labels at all times. Others only reveal them when the user hovers over or interacts with the slider. Both approaches have legitimate use cases.

Always-visible labels are the better default for most content. They improve accessibility, they work reliably on mobile where hover doesn’t exist, and they communicate context to users before they engage with the slider. Hover-state labels can look cleaner on desktop, but they risk hiding information that some users will never see.

If your labels carry critical information — a treatment timeline, a product name, a renovation stage — default to always-on. Don’t make your audience work to find context.

Why Generic “Before” and “After” Labels Are Hurting Your Content

The case against default labels is straightforward: the label is part of the message. When you strip away the ability to customize it, you strip away a layer of meaning that images alone can’t replace.

Consider these scenarios:

• A medical clinic showing a 12-week treatment result publishes a slider labeled “Before” and “After.” The timeline, the most compelling detail, disappears entirely.
• A photo editor showcasing their retouching process labels their work “Before” and “After.” But what the viewer actually needs to understand is “RAW” vs. “Edited,” two very different concepts.
• A real estate photographer reveals a vacant property transformed through virtual staging. “Before” and “After” tell the viewer almost nothing. “Unfurnished” and “staged” tell the whole story.
• An e-commerce brand compares a standard formula to a premium upgrade, labeling both sides with defaults. A missed opportunity to reinforce the product’s value story.

In each case, the default label doesn’t just fail to add meaning; it actively erases meaning that was already there.

When Vague Labels Reduce Trust

In clinical and medical contexts, label precision isn’t just a branding preference; it’s a credibility signal. Patients evaluating treatment outcomes expect accuracy. A label that says “Before” when it could say “Pre-Procedure” reads as imprecise, and imprecision in clinical content creates doubt.

The same logic applies to product comparisons. A vague label on a premium product suggests the brand didn’t think carefully about the presentation, which makes buyers wonder whether the same carelessness applied to the product itself.

The Branding Consistency Problem

Default “Before” and “After” text rarely matches anyone’s brand voice, typography, or color palette. If your website uses a specific sans-serif font, a brand color system, and a consistent content tone, generic white labels in the corner of a slider stick out like a foreign element.

Labels that match your visual identity don’t just look better, they reinforce the sense that every detail on your site was intentional. That perception matters more than most people realize.

The 8 Dimensions of Fully Customizable Before After Comparison Labels

Full label customization isn’t a single toggle. It’s a set of independent controls, each governing a different aspect of how your labels look and behave. Here’s what to look for, and why each one matters.

Label Text: Beyond “Before” and “After”

The most fundamental customization is simply being able to change the words. A fully customizable slider lets you replace “Before” and “After” with any text: “Original,” “Retouched,” “Day 1,” “After Treatment,” a product name, a date, or a process stage.

If you serve international audiences, multi-language support matters here too. Check whether your tool supports UTF-8 characters, accents, and right-to-left text if needed.

Label Color: Matching Your Visual Identity

Label color has two separate controls: the text (foreground) color and the background color. Both should be configurable independently.

High-contrast combinations matter most when your images have complex or variable backgrounds. A white label on a white sky disappears. A dark background behind the label text solves that problem cleanly.

Label Font: Typography That Fits Your Brand

Font family, weight, and style options allow your labels to align with your existing typography. A polished portfolio site using a geometric sans-serif shouldn’t have labels that render in a different typeface.

In practice, bold and legible fonts outperform decorative or script fonts in comparison contexts. The label needs to be readable at a glance, at any screen size.

Label Size: Scaling for Readability

Font size controls range from simple pixel values to relative sizing that scales with the viewport. Responsive font sizing is the better approach for most sites; it keeps labels readable on mobile without requiring a separate configuration.

As a baseline, avoid label text smaller than 12px on mobile. Below that threshold, labels become inaccessible to users with even mild visual impairments.

Label Position: Placing Labels Where Eyes Go First

Positional presets are the most common approach: top-left, top-right, bottom-left, bottom-right, and center. Some tools offer precise offset controls for pixel-level placement.

Label position also interacts with slider orientation. On a horizontal slider, labels typically anchor to the top or bottom of each image half. On a vertical slider, they may need to be repositioned to avoid overlapping the divider.

Background and Opacity: Legibility Over Any Image

A semi-transparent background behind your label text is one of the most practical customization options available. It preserves readability on complex, high-detail images without obscuring too much of the visual.

Secondary styling options like border radius, padding, and blur effects affect how polished the label feels. A label with subtle padding and rounded corners integrates into the design more naturally than a hard-edged text block.

Visibility Triggers: Control When Labels Appear

The main options are always visible, visible on hover, visible until first interaction, or hidden entirely. As discussed earlier, always-visible is the safest default for most use cases.

Mobile behavior deserves its own consideration. If your plugin offers a mobile-specific visibility override, use it, hover states are meaningless on touch devices, and labels that only appear on hover will never be seen by mobile users.

Accessibility Compliance: Labels That Work for Everyone

WCAG AA guidelines require a contrast ratio of at least 4.5:1 between your label text and its background. This is not an optional consideration; it’s the minimum standard for serving users with visual impairments.

Avoid designs where color alone distinguishes the label’s meaning. If your “Before” and “After” labels are differentiated only by their background color, colorblind users lose that distinction. Text itself carries the meaning; color is a visual enhancement on top of it.

Industry Use Cases: How Different Professionals Use Custom Comparison Labels

Custom comparison labels become useful across many industries because they let professionals add clear context to visual changes. Designers can label layout variations, photographers can highlight edits, real estate agents can show renovation progress, beauty clinics can compare treatment results, and eCommerce brands can present product upgrades more clearly. Instead of relying on generic “before” and “after” text, custom labels help each use case feel more specific, professional, and easier for viewers to understand.

Photography and Photo Editing

Photographers and retouchers use comparison sliders to demonstrate the depth of their editing work. Default labels erase the specificity of that process.

Better label pairs: “RAW” / “Edited” — “Original” / “Color Graded” — “Unprocessed” / “Final Export”

Each pair communicates the nature of the transformation, not just the fact of it.

Medical and Aesthetic Clinics

Clinical before/after content carries higher stakes than most. Patients evaluating treatment providers are looking for precision and professionalism. Labels that reflect actual treatment timelines reinforce both.

Better label pairs: “Before Treatment” / “After 8 Weeks” — “Day 1” / “Month 3” — “Pre-Procedure” / “6 Months Post”

The specificity of “6 Months Post” communicates something that “After” simply cannot, and that specificity builds trust.

Real Estate and Architecture

Renovation reveals and virtual staging demonstrations are some of the most visually compelling before/after use cases. The story here is the type of transformation, not just the fact that change occurred.

Better label pairs: “Unfurnished” / “Staged”, “Before Renovation” / “After Renovation”, “2018” / “2024”

E-commerce and Product Brands

Product brands use comparison sliders to show results, compare tiers, and demonstrate value. Labels are part of the product story.

Better label pairs: “Standard Formula” / “Premium Formula”, “Before Use” / “After 30 Days”, “Without Filter” / “With Filter.“

Skincare and Wellness

Routine documentation, supplement results, and fitness transformations all benefit from time-specific labels. “Week 0” and “Week 12” communicate a journey that “Before” and “After” flattens into a single undifferentiated moment.

Better label pairs: “Week 0” / “Week 12”, “No Product” / “With [Product Name]”

How to Set Up Fully Customizable Before After Comparison Labels in WordPress

To walk through a real-world example, we’ll use WP Before After Image Slider by CodeCanel, a WordPress plugin that includes a dedicated label configuration panel covering all the customization dimensions described above. You can adjust every aspect of your labels directly from the WordPress dashboard, without writing a single line of CSS.

Accessing the Label Settings Panel

After installing the plugin and creating a new slider, you’ll find the label settings within the slider’s configuration panel. The label section contains separate fields for the “Before” label and the “After” label, each with its own controls: text input, color picker, font selector, size control, position selector, and visibility toggle.

Everything is grouped logically, so you’re not hunting through general settings to find label-specific options.

Customizing Label Text for Your Content

Click into the text field for each label and replace the default text with whatever fits your content. The field supports standard characters, numbers, and common special characters, useful for labels like “Week 1” or “Post-Treatment.”

Keep label text short and specific. One to three words is usually ideal. Longer labels can crowd the image, especially on mobile screens.

Styling Labels: Color, Font, and Background

Set the text color using the color picker to match your brand palette. Set the background color separately, and adjust the opacity slider to find the right balance between readability and visual transparency.

Select a font weight that prioritizes legibility, bold or semi-bold typically reads best on image overlays. Then set a font size that holds up at small screen sizes. If you’re unsure, preview on mobile before finalizing.

Setting Label Position and Visibility Behavior

Choose a position preset from the available options. For most sliders, top-left for the “Before” label and top-right for the “After” label is a clean, intuitive layout that keeps the labels out of the central action area.

Set the visibility behavior to “always visible” unless you have a specific reason to use hover-triggered display. If the plugin offers a mobile visibility override, confirm that it’s set to always-on for touch devices.

Previewing and Testing Your Labels

Before publishing, preview your slider in the live editor and check how the labels look at different screen widths. A label that looks perfect on a desktop can be too large, poorly positioned, or illegible on a phone screen.

A quick QA checklist: text is readable at mobile width, background provides enough contrast, labels don’t overlap the divider handle, and both labels are visible before any interaction begins.

CSS Customization for Advanced Label Control

For developers or users who want more precision than plugin settings provide, CSS overrides offer granular control over label appearance. This section applies to any before/after slider, regardless of which tool you’re using.

Common CSS Selectors for Before After Labels

Most before/after slider plugins apply class names to label elements along the lines of .before-label, .after-label, .comparison-label, or plugin-specific prefixes. To find the exact selector your plugin uses, right-click a label in your browser and choose Inspect (or Inspect Element). The class names will appear in the HTML panel.

Once you have the selector, any CSS overrides applied in your theme’s custom CSS panel will target those elements directly.

Useful CSS Overrides for Label Styling

/* Label text color */
.before-label,
.after-label {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Adjust opacity for a lighter background */
.after-label {
  background-color: rgba(0, 0, 0, 0.3);
}

Use !important sparingly. It can override plugin styles effectively, but overusing it makes future CSS changes harder to manage. Prefer specificity over !important when possible.

Making Labels Fully Responsive with CSS

.before-label,
.after-label {
  font-size: clamp(11px, 2vw, 16px);
}

This scales the font size fluidly between 11px and 16px based on the viewport width, no media queries required for basic responsiveness.

@media (max-width: 480px) {
  .before-label,
  .after-label {
    font-size: 11px;
    padding: 4px 8px;
  }
}

Choosing a Before After Slider Plugin With Full Label Customization

When evaluating plugins, label customization is one of the most revealing features to check. Some plugins bury label options in general settings. Others lock the text to “Before” and “After” entirely, requiring CSS for any change. A well-designed plugin surfaces label controls in a dedicated, clearly organized panel.

Feature	WP Before After Image Slider	Basic Drag Plugins	Code-Only Solutions
Custom label text	Yes	Limited / No	Yes (manual)
Label color control	Yes	Rarely	Yes (CSS)
Font size and weight	Yes	Rarely	Yes (CSS)
Position presets	Yes	Rarely	Yes (CSS)
Visibility trigger options	Yes	Rarely	Yes (JS + CSS)
No-code friendly	Yes	Partially	No

What to Look for in a Label Customization Panel

Must-have features: editable text field, color picker for text and background, position selector, and visibility toggle.

Nice-to-have features: per-slider label overrides (so different sliders on the same site can have different label styles), mobile-specific visibility settings, background opacity control, and border radius adjustments.

Red flags: any plugin that requires CSS to change basic label text, or that offers no label customization panel at all. Those tools will create friction every time your content needs change.

No-Code vs. Code-Based Customization, Which Approach Fits Your Workflow?

The no-code approach, using plugin settings panels, is faster to set up, easier to hand off to non-developers, and requires no ongoing code maintenance. It’s the right default for most WordPress users.

The code-based approach CSS overrides give pixel-perfect control and integrate cleanly with a design system. It’s ideal for agencies building client sites or developers who want label styles to inherit from a global stylesheet.

A hybrid approach often works best in practice: use plugin settings to handle the fundamentals, then layer in CSS for fine-tuning. That way, the settings panel stays the source of truth for content changes, while CSS handles the design precision.

Take Full Control of Your Before After Comparison Labels

Comparison labels are not decorative details. They are the layer of context that makes a before/after slider genuinely useful to your audience, the difference between a slider that shows change and one that explains it.

Whether you’re documenting a clinical result, showcasing a design transformation, or demonstrating a product upgrade, the ability to control your label text, styling, position, and visibility is what separates a polished, purposeful comparison from a generic one.

For WordPress users who want that level of control without writing custom CSS, WP Before After Image Slider provides a complete label configuration panel covering every dimension in this guide, directly from the WordPress dashboard.

Frequently Asked Questions

This page was last edited on 4 June 2026, at 5:38 pm