-1

The text I need to replace is: "I'm Craftsman"

It is present in the following code:

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" href="#craftsman_gateway" role="tab" data-toggle="tab" aria-expanded="true">I'm Craftsman</a>
    </li>
   
   

2 Answers2

-1

It is possible to make it look as though there is text in an element using CSS. Actually what you are doing is creating a pseudo element, before or after, which you can style in a limited way and, importantly for this exercise, you can include content.

See this example which has an li element with text in the anchor element in the usual way, and another which has the text as content in a pseudo element. (I have given this li element an id just so I can distinguish it from the original one - you could use a class for example instead).

Note especially that the apostrophe (single quote) is a special character which has to be escaped using the backslash in the content setting. I guess this was part of the exercise to introduce this extra thing to have to consider.

<style>

#use-css::before {
  content: 'I\'m Craftsman';
}
</style>

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" href="#craftsman_gateway" role="tab" data-toggle="tab" aria-expanded="true">I'm Craftsman</a>
    </li>
    <li class="nav-item">
        <a id="use-css" class="nav-link active" href="#craftsman_gateway" role="tab" data-toggle="tab" aria-expanded="true"></a>
    </li>
</ul>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
-3

The following code is

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" href="#craftsman_gateway" role="tab" data-toggle="tab" aria-expanded="true">I'm Craftsman</a>
    </li>

Just change the I'm Craftsman.