Removing the underline from the "more…" link?

Can you post a link to your site?

.more-link a {text-decoration: none;}

Thanks for the replies, guys.

Stephen — Can’t post a link because I’m developing on localhost…

Aiiox — That doesn’t work. Even .more-link a{background:red;} doesn’t work.

However, .more-link{background:red;} works, though .more-link{text-decoration:none;} does not work. That’s what’s driving me nuts.

a{background:red;} works.
a{text-decoration:none;} does not.

.more-link{background:red;} works.
.more-link{text-decoration:none;} does not.

Here’s some source code (edited for privacy, but structured just like the source code I’m having trouble with):

<ul class="services-list">
<li class="clear">

<a href="https://google.com"><h3 class="services-title">A GREAT SERVICE</h3></a>

<div class="services-lede">
<div class="randomClass">
<span class="myPageHeader">My Page Header</span> Some intro text
<a href="https://localhost/wordpress/services/The rest of the article/#more-38" class="more-link">More…</a>
</div>
</div>

</li>

</ul>

What theme are you using? What about this:

a.more-link {
  text-decoration: none;
}

I’m building a child theme from the Simone theme.

a.more-link {
  text-decoration: none;
}

…Doesn’t work, but…

a.more-link {
  background: yellow;
}

…works. Absolutely crazy.

I installed Simone on my local WP install and I don’t see any HTML code like that; you seem to have made some extensive modifications. Or are you using a plugin to generate some of your content?

Thanks for your diligence Stephen.

Yes, I made modifications: I created a custom front-page.php file and used custom queries to display content from various pages on that front page. (Didn’t use a plugin though.)

I used a custom loop to add the children from one of those pages in an unordered list. Since the front page is an index page, it outputs just the child page content that’s before the “more” tag. (WordPress inserts the word “more” as a link which jumps to the full page.)

(Incidentally, I’m sure the above all sounds like I have more expertise in coding than this thread suggests, but I just followed the formula from an online course to do it. :^) I’m no expert, which is likely why this “a” tag underline thing has me stumped…)

Below is PHP code for what I described above.

In the PHP, I even tried echoing a div around the ‘More…’ so I could give it a class and use that class to remove the underline — but the underline stayed! :^(… I was able to do other things to style the link, but not “text-decoration: none;”. Absolutely crazy.

// The Loop
		 if ( $services_query->have_posts() ) {

			echo '<ul class="services-list">';
			while ( $services_query->have_posts() ) {
				$services_query->the_post();
				echo '<li class="clear" onclick="document.location=\'' . get_permalink() . '\'">';
				echo '<a href="' . get_permalink() . '" title="' . get_the_title() . ' Services">';
				echo '<h3 class="services-title">' . get_the_title() . '</h3>';
				echo '</a>';
				echo '<div class="services-lede">';
				the_content('(More...)');
				echo '</div>';
				echo '</li>';
			}
			echo '</ul>';
		}

Btw,

.services-lede a{
text-decoration: none;
}

…doesn’t work, but…

.services-lede a{
background:yellow;
}

…works. :^(

I’m sorry, but even with that code snippet you posted I can’t reproduce your issue. You could try the nuclear approach:

a.more-link {
  text-decoration: underline !important;
}

This should work even if the underlining is coming from somewhere totally unexpected.

YESSS! That worked. Thanks Stephen!

The nuclear approach is cool because I’m enqueuing a custom style sheet for this front page only. It shouldn’t affect the rest of the site (I think). :^)