Q: Horizontally "reveal" text in a container I would like a transition like this
#my-div {
  width: 20px;
  transition: width 1s ease;
}

#my-div:hover {
  width: 100%
}

Inside my div will be an icon that sits inside the 20px. When you mouse over the icon the width will expand to it's parent's container. Here's where I'm getting tripped up. I want the text "Auto Refresh" to be centered at the 100% width at all times. So when the container is at 20px then "Auto Refresh" text will be hidden because it's too far over (i.e it won't fit inside the 20px width). When you hover over the icon the width will expand revealing the hidden "Auto Refresh" text.
I've tried using overflow: no-wrap and overflow: hidden but hidden seems to do nothing. I'm wondering if this is even possible in CSS or if I need to use multiple layers and trigger animations on those layers with javascript. Here is the effect I'm going for.

In the absolute center of the orange div should be "Auto Refresh". I hope the gif conveys my goal well. The important part is that the text is hidden before mouse over and as the orange background slides over it slowly reveals the text as though it was always there, but was just hidden before.
Do I need multiple layers and trigger animations via javascript to accomplish this? Or is this doable in pure CSS?
Relevant HTML (Please excuse the inline style. I'm fiddling with dev tools)
<div class="col-sm-6 col-md-4 col-12 region-div us-region-div">
<div class="inner border-grey-light">
    <div id="us-datasource" class="crossfade data-source-blizzard-api">
        <img class="bottom" src="assets/data-source-blizzard-api-30x30.png" title="Price data from Battle.net Web API" alt="Price data from Battle.net Web API">
        <img class="top" src="assets/data_source_wow_30x30.png" title="Price data from in-game" alt="Price data from in-game">
    </div>
    <a href="US"><h3 class="region-title">US</h3></a>
    <p class="money-text"><span id="us-money-text" class="odometer">175,673</span><img src="assets/gold-transparent-compressed.png" class="gold"></p>
    <div class="price-trend">
        <span class="money-text-small">
            <span id="us-arrow" class="crossfade down-arrow arrow">
                <img class="bottom" src="assets/downarrow-resized.png">
                <img class="top" src="assets/uparrow-resized.png">
            </span>
            <span id="us-money-text-small" class="odometer">-1,206</span>
            <img src="assets/gold-transparent-compressed.png" class="gold-small">
        </span>
    </div>
    <p id="us-last-change-text" class="last-change">&nbsp;</p>
    <p id="us-datetime" class="region-date">&nbsp;</p>
    <div class="refresh-container">
        <div id="patreon">
            <i class="fab fa-patreon" style="
            color: white;
            font-size: 1.25rem;
            top: 12px;
            position: absolute;
            left: 12px;
            "></i>
        </div>
        <a href=""><p id="us-new-price" class="lead new-price show-price"><i id="us-price-refresh-icon" class="fas fa-sync-alt"></i> New Price!</p></a>
    </div>
</div>



A: You can use clip-path to simulate the illusion of the text being revealed when the rectangular div container expands. Pure CSS, here are the relevant HTML and CSS you can apply to your code:


#my-div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: #000;
  color: #FFF;
  padding: 20px;
  
  /* Relevant starting here */
  width: 400px;
  transition: clip-path 1s ease;
  clip-path: polygon(0 0, 20% 0%, 20% 100%, 0% 100%);
}

#my-div:hover {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
<div id = "my-div">This is a test div</div>


