Wikipedia Viewer - facing problem with 'a' links and divs


I created my Wikipedia Viewer project and it works, but there is a problem that I want to resolve before posting it.

Here’s the codepen:

To show the result list on searching, I am outputing a div within an ‘a’ tag for each result.

The problem is the result list are showing up with decoration in the form of links.

I looked online for embedding div in a tag and it was mentioned to use 'display:block". I have done this for the .resA class, but it does not seem to have any effect. I have also used text-decoration:none, but that does not have any effect either.

Please guide me as to how to get rid of the text being shown in the form of link instead of default behaviour.


Perhaps you can explain what you want to do more clearly? Right now there is no text-decoration so that is working as intended.
The text in the div is an a tag so that is also working as intended.
If you want to use a different color for the a tag than you can specify that in CSS.

So right now, to me it seems like everything is working as intended. Obviously it doesn’t work as you intended it so please give an example of how you want it to look so that we can give a more detailed answer.

Hello there!

I think you are already on the right track. Applying text-decoration: none actually does have an effect, as the links are not underlined anymore. It is worth noting that you currently have it applied to both a {...} and .resA {...} in the CSS—I recommend keeping the one applied to .resA and remove the one applied to all anchors.

I assume that by “not [having] any effect” you are referring to the colour of the text, too. If that is the case, you can simply do this:

resA {
    text-decoration: none;
    color: crimson; /* Or "inherit" if you have already specified the div's font colour and you would like that inherited */

If you still want to show links as visited, you will have to style resA:link and resA:visted separately.

I hope that helps! :slight_smile:

EDIT: Missed a . before the resA class selector!

Thank you! Your suggestions helped me achieve the desired result.