css - Can I set an element's size to fit its potential content, rather than its actual content?

Question

Consider this bar of buttons:

body {text-align: right;}

<button>Save</button>
<button>Cancel</button>
<button>Delete</button>

Answer 1

I would consider data attribute to add both texts using pseudo elements then control the opacity to hide/show them:

div {
  text-align: right;
}

#del {
  display: inline-block;
  position: relative
}

#del:before {
  content: attr(data-text);
  position:absolute;
  left:0;
  right:0;
  top:1px; /*there is 1px default padding */
  text-align:center;
}

#del:after {
  content: attr(data-alt);
  opacity:0;
}


#del:hover::before {
   opacity:0;
}
#del:hover::after {
   opacity:1;
}

<div><button>Save</button><button>Cancel</button><button data-text="Delete" data-alt="Click me again to confirm deletion" id="del"></button></div>